<!--
 * @Author: wangwang 2723008256@qq.com
 * @Date: 2022-05-12 09:15:49
 * @LastEditors: 番茄炒蛋蛋 wzh15802755802@163.com
 * @LastEditTime: 2025-01-10 11:20:58
 * @FilePath: \jzjypc4.0\src\views\ResourceCenter\beikeziyuan.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <!-- 备课资源包页 -->
  <div id="container">
    <div class="top">
      <div class="bread" v-show="!isdingzhi">
        <span>当前位置：</span>
        <el-breadcrumb separator=">">
          <el-breadcrumb-item :to="{ path: routeurl }" v-if="isSearch">{{
            routeNmae
          }}</el-breadcrumb-item>
          <el-breadcrumb-item :to="{ path: routeurl }" v-if="!isSearch">{{
            routeNmae
          }}</el-breadcrumb-item>
          <el-breadcrumb-item :to="{ path: fromPath }" v-if="bigTapName">{{
            bigTapName
          }}</el-breadcrumb-item>
          <el-breadcrumb-item :to="{ path: zybFlurl }" v-if="zybFlTitle">{{
            zybFlTitle
          }}</el-breadcrumb-item>

          <el-breadcrumb-item>{{ title }}</el-breadcrumb-item>
        </el-breadcrumb>
      </div>
      <div class="bread" v-if="isdingzhi">
        <span>当前位置：</span>
        <el-breadcrumb separator=">">
          <el-breadcrumb-item :to="{ path: '/personal/OrderList'}" >
            我的订单
          </el-breadcrumb-item>
          <el-breadcrumb-item :to="{ path: dingzhiQuery.path + dingzhiQuery.query}" >{{
            dingzhiQuery.baoName
          }}</el-breadcrumb-item>
          <el-breadcrumb-item>{{ title }}</el-breadcrumb-item>
        </el-breadcrumb>
      </div>
      <div class="beikeziyuan">
        <div class="beike" v-if="type_id == 1">
          <img src="../../assets/img/ziyuan.png" />
          <div class="details">
            <div class="title">
              <span v-if="is_tj == 1">推荐</span>
              <img src="../../assets/img/ffzyb/vip.png" v-show="is_sf == 1" >
              <h3>{{ title }}</h3>
              <!-- <div class="money" v-if="is_sf == 0">免费</div>
              <div class="money" v-if="is_sf == 1 && gm_status == 0">
                <img src="../../assets/img/money.png" />付费资源
              </div>
              <div class="money" v-if="is_sf == 1 && gm_status == 1">
                <img src="../../assets/img/money.png" />已解锁
              </div> -->
            </div>
            <div class="msg">
              <p v-html="sub_info"></p>
              <div class="bottom">
                <!-- <span class="upTime" v-if="from_int != 10"
                  >更新于{{ timeStamp2String(update_time * 1000, 2) }}</span
                > -->
                <!-- <span
                  class="upTime"
                  v-if="from_int == 10"
                  style="color: #ff9b04"
                >
                  精选
                </span> -->
                <span class="seeNum"
                  ><i class="el-icon-view"></i>{{ view_nums }}</span
                >
                <span class="recNum"
                  >共<a>{{ kejianList.length }}</a
                  >份资源</span
                >
              </div>
            </div>
          </div>
        </div>
        <div class="beike zidingyi" v-if="type_id != 1">
          <img src="../../assets/img/zdyzyEn.png" v-if="kemu_id == 1" />
          <img src="../../assets/img/zydzyCh.png" v-if="kemu_id == 3" />
          <div class="details" v-if="true">
            <div class="title">
              <span v-if="is_tj == 1">推荐</span>
              <h3>{{ title }}</h3>
              <!-- <div class="money" v-if="is_sf == 0">免费</div>
              <div class="money" v-if="is_sf == 1 && gm_status == 0">
                <img src="../../assets/img/money.png" />付费资源
              </div>
              <div class="money" v-if="is_sf == 1 && gm_status == 1">
                <img src="../../assets/img/money.png" />已解锁
              </div> -->
            </div>
            <div class="msg">
              <p v-html="sub_info"></p>
              <div class="bottom">
                <span class="seeNum"
                  ><i class="el-icon-view"></i>{{ view_nums }}</span
                >
                <span class="recNum"
                  >共<a>{{ kejianList.length }}</a
                  >份资源</span
                >
              </div>
            </div>
          </div>
        </div>
        <div class="collect" v-if="sc_status == 0" @click="getCollect">
          <!-- <i class="el-icon-star-off"></i> -->
          <img src="../../assets/img/weishoucang.png" alt="">
          <p>收藏本资源</p>
        </div>
        <div class="collect getsc" v-if="sc_status == 1" @click="cancelCollect">
          <!-- <i class="el-icon-star-on"></i> -->
          <img src="../../assets/img/yishoucang.png" alt="">
          <p>已收藏</p>
        </div>
        <div class="pl" @click="xiepl" v-if="havepl == 0 && is_sf == 1" v-show="false">
          <img src="../../assets/img/weipinglun.png" alt="">
          <p>写评价 (评价有奖)</p>
        </div>
        <div class="pl" @click="xiepl" v-if="havepl == 1  && is_sf == 1" v-show="false">
          <img src="../../assets/img/yipinglun.png" alt="">
          <p>写评价 (评价有奖)</p>
        </div>
      </div>
    </div>
    <div class="content">
      <div class="title1">
        <p>包内资源</p>
        <span>{{ kejianList.length }}份</span>
      </div>
      <div class="box">
        <div class="left">
          <el-checkbox
            :indeterminate="isIndeterminate"
            v-model="checkAll"
            @change="handleCheckAllChange"
            class="quanxuan"
            ><span v-trigger>全选</span></el-checkbox
          >
          <!-- 有二级目录 -->
          <el-collapse
            v-model="activeNames"
            @change="handleChange"
            v-if="erjimulu"
          >
            <el-collapse-item
              v-for="(item, index) in tag_group"
              :key="index + 1"
              :name="item.tag_str"
            >
              <template slot="title">
                <div
                  class="yijiTitle"
                  :class="{ choseYijiTitle: chosedfl.indexOf(index + 1) != -1 }"
                >
                  <p class="jiaoyanClass">{{ item.tag_str }}</p>
                  <span v-show="chosedfl.indexOf(index + 1) != -1">收起</span>
                  <span v-show="chosedfl.indexOf(index + 1) == -1">展开</span>
                </div>
              </template>
              <el-collapse v-model="activeNames2" @change="handleChange2">
                <el-collapse-item
                  v-for="(hdlist) in item.group_lists3"
                  :key="hdlist.id"
                  :name="hdlist.group_title"
                >
                  <template slot="title">
                    <div
                      class="erjiTitle"
                      :class="{
                        choseYijiTitle: chosedfl2.indexOf(index + 100) != -1,
                      }"
                    >
                      <p class="jiaoyanClass">{{ hdlist.group_title }}</p>
                      <span v-show="chosedfl2.indexOf(index + 100) != -1"
                        >收起</span
                      >
                      <span v-show="chosedfl2.indexOf(index + 100) == -1"
                        >展开</span
                      >
                    </div>
                  </template>
                  <div class="srcollBox">
                    <div
                      class="hdbox"
                      v-for="sp in hdlist.lists"
                      :key="sp.id"
                      @click="chosehd(sp.id,'hd')"
                    >
                      <img
                        :src="sp.file_url"
                        alt=""
                        class="jiaoyankekjfl"
                      />
                      <div class="msg">
                        <p>
                          {{ sp.title }}
                        </p>
                        <span>{{ sp.teachers_title }}</span>
                        <div class="zhuangtai" v-if="sp.zb_status == 1">即将开始</div>
                        <div class="zhuangtai" v-if="sp.zb_status == 2">直播中</div>
                        <div class="zhuangtai" v-if="sp.zb_status == 3">查看回放</div>
                      </div>
                    </div>
                  </div>
                </el-collapse-item>
                <el-collapse-item
                  v-for="(splist) in item.group_lists2"
                  :key="splist.id"
                  :name="splist.group_title"
                >
                  <template slot="title">
                    <div
                      class="erjiTitle"
                      :class="{
                        choseYijiTitle: chosedfl2.indexOf(index + 100) != -1,
                      }"
                    >
                      <p class="jiaoyanClass">{{ splist.group_title }}</p>
                      <span v-show="chosedfl2.indexOf(index + 100) != -1"
                        >收起</span
                      >
                      <span v-show="chosedfl2.indexOf(index + 100) == -1"
                        >展开1</span
                      >
                    </div>
                  </template>
                  <div class="srcollBox">
                    <div
                      class="jybox"
                      v-for="sp in splist.lists"
                      :key="sp.id"
                      :class="{ choseKj: kejianid == sp.id }"
                      @click="choseJyk(sp,sp.id)"
                      
                    >
                    <!-- v-show="sp.nr_type_id == 1" -->
                      <img
                        :src="sp.fm_file_url"
                        alt=""
                        class="jiaoyankekjfl"
                        style="width: 100px"
                      />
                      <div class="msg">
                        <p>
                          {{ sp.title }}
                        </p>
                        <span>{{ sp.name }}</span>
                      </div>
                    </div>
                  </div>
                  <el-checkbox-group
                    v-model="checkedClass"
                    @change="handleCheckedCitiesChange"
                  >
                    <div class="zyBox">
                      <el-checkbox
                        v-for="zy in splist.lists"
                        :label="zy"
                        :key="zy.id"
                        :class="{ choseKj: kejianid == zy.id }"
                        v-show="zy.nr_type_id == 2"
                      >
                        <img
                          src="../../assets/img/resFile (1).png"
                          alt="file_url"
                          v-if="
                            zy.suffix == 'ppt' ||
                            zy.suffix == 'pptx' ||
                            zy.suffix == 'ppsx' ||
                            zy.suffix == 'pps'
                          "
                        />
                        <img
                          src="../../assets/img/resFile (2).png"
                          alt="file_url"
                          v-if="zy.suffix == 'mp4' || zy.suffix == 'rm'"
                        />
                        <img
                          src="../../assets/img/resFile (3).png"
                          alt="file_url"
                          v-if="zy.suffix == 'xls' || zy.suffix == 'xlsx'"
                        />
                        <img
                          src="../../assets/img/resFile (4).png"
                          alt="file_url"
                          v-if="zy.suffix == 'zip' || zy.suffix == 'rar'"
                        />
                        <img
                          src="../../assets/img/resFile (5).png"
                          alt="file_url"
                          v-if="zy.suffix == 'm4a' || zy.suffix == 'mp3'"
                        />
                        <img
                          src="../../assets/img/resFile (6).png"
                          alt="file_url"
                          v-if="zy.suffix == 'doc' || zy.suffix == 'docx'"
                        />
                        <img
                          src="../../assets/img/resFile (7).png"
                          alt="file_url"
                          v-if="zy.suffix == 'pdf'"
                        />
                        <img
                          src="../../assets/img/resFile (8).png"
                          alt="file_url"
                          v-if="zy.suffix == 'png' || zy.suffix == 'jpg'"
                        />
                        <div class="msg" @click.prevent="choseKj(zy.id)">
                          <p><img src="../../assets/img/ffzyb/vip.png" v-if="zy.is_sf == 1">{{ zy.title }}</p>
                          <p
                            v-if="zy.pswd && gm_status == 1 && is_sf == 1"
                            style="margin-top: 5px"
                          >
                            文件编辑密码:{{ zy.pswd }}
                          </p>
                        </div>
                      </el-checkbox>
                    </div>
                  </el-checkbox-group>
                </el-collapse-item>
                <el-collapse-item
                  v-for="(zylist) in item.group_lists"
                  :key="zylist.id"
                  :name="zylist.group_title"
                >
                  <template slot="title">
                    <div
                      class="erjiTitle"
                      :class="{
                        choseYijiTitle: chosedfl2.indexOf(index + 1) != -1,
                      }"
                    >
                      <p class="jiaoyanClass">{{ zylist.group_title }}</p>
                      <span v-show="chosedfl2.indexOf(index + 1) != -1"
                        >收起</span
                      >
                      <span v-show="chosedfl2.indexOf(index + 1) == -1"
                        >展开</span
                      >
                    </div>
                  </template>
                  <div>
                    <el-checkbox-group
                      v-model="checkedClass"
                      @change="handleCheckedCitiesChange"
                    >
                      <div class="zyBox">
                        <el-checkbox
                          v-for="zy in zylist.lists"
                          :label="zy"
                          :key="zy.id"
                          :class="{ choseKj: kejianid == zy.id }"
                        >
                          <img
                            src="../../assets/img/resFile (1).png"
                            alt="file_url"
                            v-if="
                              zy.suffix == 'ppt' ||
                              zy.suffix == 'pptx' ||
                              zy.suffix == 'ppsx' ||
                              zy.suffix == 'pps'
                            "
                          />
                          <img
                            src="../../assets/img/resFile (2).png"
                            alt="file_url"
                            v-if="zy.suffix == 'mp4' || zy.suffix == 'rm'"
                          />
                          <img
                            src="../../assets/img/resFile (3).png"
                            alt="file_url"
                            v-if="zy.suffix == 'xls' || zy.suffix == 'xlsx'"
                          />
                          <img
                            src="../../assets/img/resFile (4).png"
                            alt="file_url"
                            v-if="zy.suffix == 'zip' || zy.suffix == 'rar'"
                          />
                          <img
                            src="../../assets/img/resFile (5).png"
                            alt="file_url"
                            v-if="zy.suffix == 'm4a' || zy.suffix == 'mp3'"
                          />
                          <img
                            src="../../assets/img/resFile (6).png"
                            alt="file_url"
                            v-if="zy.suffix == 'doc' || zy.suffix == 'docx'"
                          />
                          <img
                            src="../../assets/img/resFile (7).png"
                            alt="file_url"
                            v-if="zy.suffix == 'pdf'"
                          />
                          <img
                            src="../../assets/img/resFile (8).png"
                            alt="file_url"
                            v-if="zy.suffix == 'png' || zy.suffix == 'jpg'"
                          />
                          <div class="msg" @click.prevent="choseKj(zy.id)">
                            <p><img src="../../assets/img/ffzyb/vip.png" v-if="zy.is_sf == 1">{{ zy.title }}</p>
                            <p
                              v-if="zy.pswd && gm_status == 1 && is_sf == 1"
                              style="margin-top: 5px"
                            >
                              文件编辑密码:{{ zy.pswd }}
                            </p>
                          </div>
                        </el-checkbox>
                      </div>
                    </el-checkbox-group>
                  </div>
                </el-collapse-item>
              </el-collapse>
            </el-collapse-item>
          </el-collapse>
          <!-- 无二级目录 -->
          <el-collapse
            v-model="activeNames3"
            @change="handleChange3"
            v-if="!erjimulu"
          >
            <el-collapse-item
              v-for="(hdlist) in group_lists3"
              :key="hdlist.group_title"
              :name="hdlist.group_title"
            >
              <template slot="title">
                <div
                  class="yijiTitle"
                  :class="{
                    choseYijiTitle: chosedfl3.indexOf(hdlist.group_title) != -1,
                  }"
                >
                  <p class="jiaoyanClass">{{ hdlist.group_title }}</p>
                  <span v-show="chosedfl3.indexOf(hdlist.group_title) != -1">收起</span>
                  <span v-show="chosedfl3.indexOf(hdlist.group_title) == -1">展开</span>
                </div>
              </template>
              <div class="srcollBox">
                <div
                  class="hdbox"
                  v-for="sp in hdlist.lists"
                  :key="sp.id"
                  @click="chosehd(sp.id,'hd')"
                >
                  <img
                    :src="sp.file_url"
                    alt=""
                    class="jiaoyankekjfl"
                  />
                  <div class="msg">
                    <p>
                      {{ sp.title }}
                    </p>
                    <span>{{ sp.teachers_title }}</span>
                    <div class="zhuangtai" v-if="sp.zb_status == 1">即将开始</div>
                    <div class="zhuangtai" v-if="sp.zb_status == 2">直播中</div>
                    <div class="zhuangtai" v-if="sp.zb_status == 3">查看回放</div>
                  </div>
                </div>
              </div>
            </el-collapse-item>
            <el-collapse-item
              v-for="(splist) in group_lists2"
              :key="splist.group_title"
              :name="splist.group_title"
            >
              <template slot="title">
                <div
                  class="yijiTitle"
                  :class="{
                    choseYijiTitle: chosedfl3.indexOf(splist.group_title) != -1,
                  }"
                >
                  <p class="jiaoyanClass">{{ splist.group_title }}</p>
                  <span v-show="chosedfl3.indexOf(splist.group_title) != -1">收起</span>
                  <span v-show="chosedfl3.indexOf(splist.group_title) == -1">展开</span>
                </div>
              </template>
              <div class="srcollBox">
                <div
                  class="jybox"
                  v-for="sp in splist.lists"
                  :key="sp.id"
                  :class="{ choseKj: kejianid == sp.id }"
                  @click="choseJyk(sp,sp.id)"
                  
                >
                <!-- v-show="sp.nr_type_id == 1" -->
                  <img
                    :src="sp.fm_file_url"
                    alt=""
                    class="jiaoyankekjfl"
                    style="width: 100px"
                  />
                  <div class="msg">
                    <p>
                      {{ sp.title }}
                    </p>
                    <span>{{ sp.name }}</span>
                  </div>
                </div>
              </div>
              <el-checkbox-group
                v-model="checkedClass"
                @change="handleCheckedCitiesChange"
              >
                <div class="zyBox">
                  <el-checkbox
                    v-for="zy in splist.lists"
                    :label="zy"
                    :key="zy.id"
                    :class="{ choseKj: kejianid == zy.id }"
                    v-show="zy.nr_type_id == 2"
                  >
                    <img
                      src="../../assets/img/resFile (1).png"
                      alt="file_url"
                      v-if="
                        zy.suffix == 'ppt' ||
                        zy.suffix == 'pptx' ||
                        zy.suffix == 'ppsx' ||
                        zy.suffix == 'pps'
                      "
                    />
                    <img
                      src="../../assets/img/resFile (2).png"
                      alt="file_url"
                      v-if="zy.suffix == 'mp4' || zy.suffix == 'rm'"
                    />
                    <img
                      src="../../assets/img/resFile (3).png"
                      alt="file_url"
                      v-if="zy.suffix == 'xls' || zy.suffix == 'xlsx'"
                    />
                    <img
                      src="../../assets/img/resFile (4).png"
                      alt="file_url"
                      v-if="zy.suffix == 'zip' || zy.suffix == 'rar'"
                    />
                    <img
                      src="../../assets/img/resFile (5).png"
                      alt="file_url"
                      v-if="zy.suffix == 'm4a' || zy.suffix == 'mp3'"
                    />
                    <img
                      src="../../assets/img/resFile (6).png"
                      alt="file_url"
                      v-if="zy.suffix == 'doc' || zy.suffix == 'docx'"
                    />
                    <img
                      src="../../assets/img/resFile (7).png"
                      alt="file_url"
                      v-if="zy.suffix == 'pdf'"
                    />
                    <img
                      src="../../assets/img/resFile (8).png"
                      alt="file_url"
                      v-if="zy.suffix == 'png' || zy.suffix == 'jpg'"
                    />
                    <div class="msg" @click.prevent="choseKj(zy.id)">
                      <p><img src="../../assets/img/ffzyb/vip.png" v-if="zy.is_sf == 1">{{ zy.title }}</p>
                      <p
                        v-if="zy.pswd && gm_status == 1 && is_sf == 1"
                        style="margin-top: 5px"
                      >
                        文件编辑密码:{{ zy.pswd }}
                      </p>
                    </div>
                  </el-checkbox>
                </div>
              </el-checkbox-group>
            </el-collapse-item>
            <el-collapse-item 
              v-for="(item) in group_lists"
              :key="item.group_title"
              :name="item.group_title"
            >
              <template slot="title">
                <div
                  class="yijiTitle"
                  :class="{ choseYijiTitle: chosedfl3.indexOf(item.group_title) != -1 }"
                >
                  <p class="jiaoyanClass">{{ item.group_title }}</p>
                  <span v-show="chosedfl3.indexOf(item.group_title) != -1">收起</span>
                  <span v-show="chosedfl3.indexOf(item.group_title) == -1">展开</span>
                </div>
              </template>
              <div>
                <el-checkbox-group
                  v-model="checkedClass"
                  @change="handleCheckedCitiesChange"
                >
                  <div class="zyBox">
                    <el-checkbox
                      v-for="zy in item.lists"
                      :label="zy"
                      :key="zy.id"
                      :class="{ choseKj: kejianid == zy.id }"
                    >
                      <img
                        src="../../assets/img/resFile (1).png"
                        alt="file_url"
                        v-if="
                          zy.suffix == 'ppt' ||
                          zy.suffix == 'pptx' ||
                          zy.suffix == 'ppsx' ||
                          zy.suffix == 'pps'
                        "
                      />
                      <img
                        src="../../assets/img/resFile (2).png"
                        alt="file_url"
                        v-if="zy.suffix == 'mp4' || zy.suffix == 'rm'"
                      />
                      <img
                        src="../../assets/img/resFile (3).png"
                        alt="file_url"
                        v-if="zy.suffix == 'xls' || zy.suffix == 'xlsx'"
                      />
                      <img
                        src="../../assets/img/resFile (4).png"
                        alt="file_url"
                        v-if="zy.suffix == 'zip' || zy.suffix == 'rar'"
                      />
                      <img
                        src="../../assets/img/resFile (5).png"
                        alt="file_url"
                        v-if="zy.suffix == 'm4a' || zy.suffix == 'mp3'"
                      />
                      <img
                        src="../../assets/img/resFile (6).png"
                        alt="file_url"
                        v-if="zy.suffix == 'doc' || zy.suffix == 'docx'"
                      />
                      <img
                        src="../../assets/img/resFile (7).png"
                        alt="file_url"
                        v-if="zy.suffix == 'pdf'"
                      />
                      <img
                        src="../../assets/img/resFile (8).png"
                        alt="file_url"
                        v-if="zy.suffix == 'png' || zy.suffix == 'jpg'"
                      />
                      <div class="msg" @click.prevent="choseKj(zy.id)">
                        <p><img src="../../assets/img/ffzyb/vip.png" v-if="zy.is_sf == 1">{{ zy.title }}</p>
                        <p
                          v-if="zy.pswd && gm_status == 1 && is_sf == 1"
                          style="margin-top: 5px"
                        >
                          文件编辑密码:{{ zy.pswd }}
                        </p>
                      </div>
                    </el-checkbox>
                  </div>
                </el-checkbox-group>
              </div>
            </el-collapse-item>
          </el-collapse>
        </div>
        <div class="right" @contextmenu.prevent="menuPlayer()" v-if="type == 1 && !notshijuan">
          <div v-for="(item,index) in filePicList" :key="index">
            <img
              :src="item.file_url"
              alt=""
              v-if="
                item.file_ext == 'png' ||
                item.file_ext == 'jpg' ||
                item.file_ext == 'doc' ||
                item.file_ext == 'png' ||
                item.file_ext == 'docx' ||
                item.file_ext == 'xls' ||
                item.file_ext == 'pdf' ||
                item.file_ext == 'xlsx'
              "
            />
            <video
              muted="muted"
              class="video"
              :src="item.file_url"
              height="448px"
              width="800px"
              type="video/mp4"
              :poster="file_url"
              controls="controls"
              loop="-1"
              preload
              ref="startvideo"
              v-if="item.file_ext == 'mp4' || item.file_ext == 'rm'"
            ></video>
            <div
              class="mp3File"
              v-if="item.file_ext == 'mp3' || item.file_ext == 'm4a'"
            >
              <img
                src="../../assets/img/resFile (5).png"
                alt=""
                style="width: 74px"
              />
              <p>{{ item.title }}</p>
              <audio :src="item.file_url" controls></audio>
            </div>
          </div>
          <div class="mohu" v-show="is_view != 0" style="position:relative;"><div class="jindu" style="bottom:0px"></div></div>
          <p class="jindutext" v-if="is_view != 0 && !noFileShow">已预览{{ v_per }}%，完整内容可下载后查看哦！</p>
          <div class="noFile jindutext" v-if="is_view == 0 || noFileShow">
            <p>当前文件暂无法提供预览，请您下载后查看</p>
          </div>
          <div class="downLoad">
            <p>{{ kejianTitle + suffix }}</p>
            <div class="alldown" @click="downLoadall" v-if="have_zip == 1">
              整包下载
            </div>
            <div class="choseDL">
              <div class="choseAgain">
                <div class="choseLists">
                  <div class="dLtop">
                    <el-checkbox
                      :indeterminate="isIndeterminate"
                      v-model="checkAll"
                      @change="handleCheckAllChange"
                      class="quanxuan"
                      ><span v-trigger></span
                    ></el-checkbox>
                    <p>全部课件</p>
                  </div>

                  <div>
                    <el-checkbox-group
                      v-model="checkedClass"
                      @change="handleCheckedCitiesChange"
                    >
                      <div class="dLits">
                        <el-checkbox
                          v-for="(item,index) in kejianList"
                          :label="item"
                          :key="index"
                          :class="{ choseKj: kejianid == item.id }"
                        >
                          <div class="msg">
                            <img src="../../assets/img/ffzyb/vip.png" v-if="item.is_sf == 1">
                            {{ item.title }}
                          </div>
                        </el-checkbox>
                      </div>
                    </el-checkbox-group>
                  </div>
                </div>
                <i class="el-icon-arrow-up"></i>
              </div>
              <span @click="downLoad">下载 {{ idArr.length }}份</span>
            </div>
          </div>
        </div>
        <div class="right" v-if="type == 1 && notshijuan">
          <div class="cannotsee">
            <img src="../../assets/img/cannotsee.png" alt="">
            <p>试卷为保密资源，暂不提供预览</p>
          </div>
          <div class="downLoad">
            <p>{{ kejianTitle + suffix }}</p>
            <div class="alldown" @click="downLoadall" v-if="have_zip == 1">
              整包下载
            </div>
            <div class="choseDL">
              <div class="choseAgain">
                <div class="choseLists">
                  <div class="dLtop">
                    <el-checkbox
                      :indeterminate="isIndeterminate"
                      v-model="checkAll"
                      @change="handleCheckAllChange"
                      class="quanxuan"
                      ><span v-trigger></span
                    ></el-checkbox>
                    <p>全部课件</p>
                  </div>

                  <div>
                    <el-checkbox-group
                      v-model="checkedClass"
                      @change="handleCheckedCitiesChange"
                    >
                      <div class="dLits">
                        <el-checkbox
                          v-for="(item,index) in kejianList"
                          :label="item"
                          :key="index"
                          :class="{ choseKj: kejianid == item.id }"
                        >
                          <div class="msg">
                            <img src="../../assets/img/ffzyb/vip.png" v-if="item.is_sf == 1">
                            {{ item.title }}
                          </div>
                        </el-checkbox>
                      </div>
                    </el-checkbox-group>
                  </div>
                </div>
                <i class="el-icon-arrow-up"></i>
              </div>
              <span @click="downLoad">下载 {{ idArr.length }}份</span>
            </div>
          </div>
        </div>
        <div class="right" @contextmenu.prevent="menuPlayer()" v-if="type == 2">
          <div class="videoBox" style="margin-top: 30px; position: static !important">
            <video
              muted="muted"
              class="video"
              :src="jyk_url"
              height="448px"
              width="800px"
              type="video/mp4"
              :poster="fm_file_url"
              controls="controls"
              loop="-1"
              preload
              ref="startvideo"
              id="myvideo"
            ></video>
            <div class="nosk" v-show="noskShow">该视频暂不支持试看，购买服务包后可查看完整课程 <span style="color:#d9761d;cursor: pointer;" @click="overfwbtjShow = true">去购买>></span></div>
            <div class="nosk skover" v-show="skover">试看已结束，购买服务包后可查看完整课程 <span style="color:#d9761d;cursor: pointer;" @click="overfwbtjShow = true">去购买>></span></div>
          </div>
          <div class="downLoad">
            <p>{{ classsTitle }}</p>
            <div class="choseDL">
              <div class="choseAgain">
                <div class="choseLists">
                  <div class="dLtop">
                    <el-checkbox
                      :indeterminate="isIndeterminate"
                      v-model="checkAll"
                      @change="handleCheckAllChange"
                      class="quanxuan"
                      ><span v-trigger></span
                    ></el-checkbox>
                    <p>全部课件</p>
                  </div>

                  <div>
                    <div class="dLits">
                      <div class="msg">
                        {{ classsTitle }}
                      </div>
                    </div>
                  </div>
                </div>
                <!-- <i class="el-icon-arrow-up"></i> -->
              </div>
              <!-- <span @click="downLoad">下载 {{ idArr.length }}份</span> -->
            </div>
          </div>
        </div>
      </div>
    </div>

    <div class="guanggao" v-if="bannerList.length > 0">
      <div class="banner">
        <el-carousel
          height="160px"
          :autoplay="false"
          indicator-position="none"
          arrow="never"
        >
          <el-carousel-item v-for="(item, index) in bannerList" :key="index">
            <img
              :src="item.file_url"
              alt="banner图"
              @click="advert(item.http_url)"
            />
          </el-carousel-item>
        </el-carousel>
      </div>
    </div>

    <div
      class="guanggao"
      v-if="bannerList.length <= 0"
      style="background: #f0f0f5; height: 40px"
    ></div>
    <!-- 评论内容列表 -->
    <div class="pinglun" v-if="is_sf == 1" v-show="false">
      <div class="plTop">
        <div class="caozuo">
          <h4>用户评价：</h4>
          <!-- <div class="xie" @click="xiepl">
            <span>写评价</span>
            <img src="../../assets/img/pingjiayoujiang.png" alt="">
          </div> -->
        </div>
        <div class="pingfen">
          <div class="leftpf" v-if="!isOf(last_score)">{{last_score}}.0</div>
          <div class="leftpf" v-if="isOf(last_score)">{{last_score}}</div>
          <div class="rightpf">
            <span><el-rate disabled v-model="last_score"></el-rate></span>
            <p>{{pl_list.length}}条评价</p>
          </div>
          <div class="xie" @click="xiepl" v-if="havepl != 1">
            <span>写评价</span>
            <img src="../../assets/img/pingjiayoujiang.png" alt="">
          </div>
        </div>
      </div>
      <div class="plLists" v-if="pl_count > 0">
        <div class="list" v-for="item in pl_list" :key="item.id" >
          <div class="tec">
            <div class="tx" v-if="item.is_anonymous != 1">
              <img :src="item.file_url" alt="">
            </div>
            <div class="tx" v-if="item.is_anonymous == 1">
              <img src="../../assets/img/mrtx.png" alt="">
            </div>
            <div class="msg">
              <h4>{{item.true_name}}</h4>
              <div class="rate">
                <span><el-rate disabled v-model="item.score"></el-rate></span>
                <div class="riqi">{{timeStamp2String(item.create_time*1000,2)}}</div>
              </div>
            </div>
          </div>
          <div class="msgcnt">
            <p>{{item.content}}</p>
          </div>
          <div class="bianji" v-if="item.is_my == 1" @click="xiepl">
            <span>修改</span>
          </div>
        </div>
        
      </div>
      <div class="nopl" v-if="pl_count == 0">
          <img src="../../assets/img/nothing.png" alt="">
          <p>暂无评论</p>
      </div>
      <div class="seeallpl" v-if="pl_count>3 && pl_list< pl_count">
        查看全部 {{pl_count}}条
      </div>
    </div>
    <!-- 评论弹窗 -->
    <div class="pinglunTc" v-show="false">
      <el-dialog
        :visible.sync="dialogVisible_pinglun"
        width="540px"
        :before-close="pinglunClose"
        custom-class="pinglun"
      >
      <h5>点击星星评分</h5>
      <div class="rate"><el-rate  text-color="#ff9900" v-model="score"></el-rate></div>
      <div class="shuru">
        <el-input
          type="textarea"
          placeholder="您觉得这个服务包怎么样？留下您的评价吧~"
          v-model="textarea"
          resize="none"
          maxlength="100"
          size="medium"
          rows="6"
          show-word-limit
        >
        </el-input>
      </div>
      <div class="tips">
        Tips：首次填写30字以上的评价，本周每日下载数量可额外奖励20条
      </div>
      <div class="niming">
        <img src="../../assets/img/chose.png" v-if="is_nm == 1" alt="" @click="is_nm = 0">
        <img src="../../assets/img/nochose.png" v-if="is_nm == 0" alt="" @click="is_nm = 1">
        <span>匿名展示</span>
      </div>
      <div class="submit" @click="addgoodscomment">
        发表评价
      </div>
      </el-dialog>
    </div>
    <!-- 下载登录弹窗 -->
    <el-dialog
      :visible.sync="dialogVisible"
      width="500px"
      :show-close="true"
      :close-on-click-modal="true"
      :before-close="handleClose"
      custom-class="login"
    >
      <LoginTc />
    </el-dialog>
    <!-- 付费资源包解锁弹窗 -->
    <div class="Gmoney">
      <el-dialog
        :visible.sync="dialogVisible_fufei"
        width="1000px"
        :before-close="fufeiClose"
        custom-class="moneyBox"
      >
        <h2>当前资源为<a>付费资源</a> ，需购买服务包后才可下载</h2>
        <div class="fangshi">
          <div class="left">
            <div class="pic">
              <img :src="xitongMsg.kf_file_url" alt="" />
            </div>
            <h4>添加客服免费领取试看</h4>
            <p><a>*</a>每位用户可领取一次</p>
          </div>
          <div class="center">
            <div class="top">
              <img src="../../assets/img/jiesuo_money.png" alt="" />
              <h3>下载解锁</h3>
            </div>
            <p>购买服务包后，包内所有资源都可以全部解锁，且可永久使用~</p>
            <a>查看资源包详情</a>
            <div class="moneyJs">购买服务包</div>
          </div>
          <div class="right">
            <div class="top">
              <img src="../../assets/img/jiesuo_number.png" alt="" />
              <h3>兑换码解锁</h3>
            </div>
            <p>已有兑换码老师可使用此方式进行解锁</p>
            <div class="numberJs" @click="dialogVisible_duihuan = true">
              输入兑换码
            </div>
          </div>
        </div>
      </el-dialog>
    </div>
    <!-- 兑换码输入解锁框 -->
    <div class="duihuan">
      <el-dialog
        :visible.sync="dialogVisible_duihuan"
        width="360px"
        :before-close="duihuanClose"
        custom-class="duihuan"
      >
        <h2>兑换码解锁</h2>
        <div class="shuru">
          <input type="text" v-model="jsm" placeholder="请输入解锁兑换码" />
        </div>
        <div class="sureJs" @click="jsmJs">确认解锁</div>
      </el-dialog>
    </div>
    <!-- 下载完成后未添加企业微信的弹窗 -->
    <downEvmTc
      v-if="downQwShow"
      :zykf_file_url="zykf_file_url"
      :xzMsg="xzMsg"
      @qwtcClose="qwtcClose"
    ></downEvmTc>
    <!-- 添加企业微信提示框 -->
    <div class="yuyueevm" v-if="qiweiTcShow">
      <el-dialog
        :visible.sync="qiweiTcShow"
        :before-close="qwClose"
        width="400px"
        top="30vh"
      >
        <div class="yyevmContent">
          <div class="top" style="height:65px">
            <!-- <h3>订阅提示</h3> -->
          </div>
          <div class="signSuccessContent">
            <p>
              为了给您提供更好的后续服务，请您添加我们的企业微信，可在手机端直接查看资源（添加成功后不再提醒）
            </p>
            <div class="pic">
              <img :src="zykf_file_url" alt="" />
            </div>
            <span @click="qwClose">已添加</span>
          </div>
        </div>
      </el-dialog>
    </div>
    <!-- 未订阅弹窗 -->
    <div class="yuyueevm dytips" v-if="dyShow">
      <el-dialog
        :visible.sync="dyShow"
        :show-close="false"
        :close-on-click-modal="false"
        width="400px"
        top="30vh"
      >
        <div class="yyevmContent">
          <div class="top dy">
            <h4>订阅提示</h4>
            <h3>
              该资源为<span style="color: #f6444e">付费内容</span
              >，请您订阅后查看
            </h3>
          </div>
          <div class="signSuccessContent">
            <span @click="goDingyue">去订阅</span>
          </div>
        </div>
      </el-dialog>
    </div>
    <!-- 限制下载条数的弹窗 -->
    <xzxxTc
      v-if="xzxxShow"
      :zykf_file_url="zykf_file_url"
      @xzxxClose="xzxxClose"
    ></xzxxTc>
    <!-- 服务包商品的弹窗 -->
    <fwbtj
      v-if="fwbtjShow"
      :choseGoodId="choseGoodId"
      :goods_lists="goods_lists"
      :caclose="fwbIsClose"
      @zixun ="zixun"
      @choseGood ="choseGood"
      @goyuyue="goyuyue"
      @closefwbtj ="closefwbtj"
    ></fwbtj>
    <!-- 服务包商品的弹窗 -->
    <skoverfubtj
      v-if="overfwbtjShow"
      :choseGoodId="choseGoodId"
      :goods_lists="goods_lists"
      :caclose="fwbIsClose"
      @zixun ="zixun"
      @choseGood ="choseGood"
      @goyuyue="goyuyue"
      @closefwbtj ="closefwbtj"
    ></skoverfubtj>
    <!-- 问题咨询加客服弹窗 -->
    <wtzxTc
      v-if="zixunShow"
      :zykf_file_url="zykf1_file_url"
      @wtzxClose="wtzxClose"
    ></wtzxTc>
    <!-- 更新提醒弹窗 -->
    <gxtxTc
      v-if="gxtxShow"
      @gxtcClose="gxtcClose"
      :zykf_file_url="gxkf_file_url"
    >
    </gxtxTc>
  </div>
</template>
<script>
import {
  islogin,
  info_kejianbao,
  info_kejian,
  url_kejian,
  plxz_url_arr,
  userinfo,
  banner,
  create_accountzysc,
  wxdlewm,
  upwxdl,
  info_videos,
  sy_goodsjsm,
  url_kejianbao,
  qywx_status,
  download_nums,
  ffzyb_status,
  getgoodsweekpopup,
  closepopup,
  page_times,
  sysinfo,
  getgoodsbykejian,
  getgmstatusbykejian,
  getkfinfobyip,
  getgoodscommentlist,
  addgoodscomment,
  updategoodscomment,
} from "../../api/http";
import { timeStamp2String } from "../../utils/time";
import LoginTc from "../../layout/components/loginTc.vue";
import downEvmTc from "../../components/zydownevm/zydownevm.vue";
import xzxxTc from "../../components/xzxzTc/xzxzTc.vue";
import fwbtj from "../../components/fwbtj/fubtj.vue";
import skoverfubtj from "../../components/fwbtj/skoverfubtj.vue";
import wtzxTc from "../../components/wtzxTc/wtzxtc.vue";
import gxtxTc from "../../components/gxtxTc/gxtx.vue";
export default {
  inject: ["reload"], //刷新页面
  props: ["xitongMsg", "kefuMsg"],
  components: {
    LoginTc,
    downEvmTc,
    xzxxTc,
    fwbtj,
    wtzxTc,
    gxtxTc,skoverfubtj
  },
  data() {
    return {
      
      gundongTop: 0, //资源中心跳转过来时的滚动条高度
      kejianbao_id: "", //课件包id
      title: "", //课件标题
      from_int: "", //判断资源是否为精选
      update_time: "", //更新时间
      view_nums: "", //浏览次数
      sub_info: "", //简介
      chosedfl: [], //左侧选中展开的分类
      chosedfl2:[],//左侧选中展开的分类 二级目录
      chosedfl3:[],//左侧选中展开的分类 无二级目录
      kejianList: [], //课件包包含的课件列表
      group_lists: [], //分类列表
      group_lists2: [], //视频分类列表
      group_lists3: [], //活动分类列表
      timeStamp2String, //时间戳转时间
      is_tj: 0, //是否为推荐
      activeNames: [1], //折叠面板默认打开值
      activeNames2: [],
      activeNames3: [],
      collapseFlag: false, //展示折叠或展开
      playFlag: true, //视频遮罩层是否显示
      file_url: "", //视频封面图，待定
      vedioPath: "", //视频地址
      checkAll: false, //全选是否选中
      checkedClass: [], //选中的课件数组
      isIndeterminate: true, //全选
      filePicList: [], //右侧要展示的内容组
      v_per: "", //右侧展示的内容百分比
      kejianTitle: "", //当前选择展示的课件详情名称
      suffix: "", //当前选择展示的课件详情类型
      kejianid: "", //当前选择展示的课件id，默认第一个
      noFileShow: false, //空图

      //下载内容
      idArr: [], //选中的课件组id
      urlArr: [], //选中的课件组下载链接数组

      //广告图
      nianji_ids: "", //年级id
      kemu_ids: "", //科目id
      bannerList: [], //广告图列表

      scrollHight: "", //视口高度
      sc_status: "", //是否收藏

      loginStatus: "", //是否登录
      dialogVisible: false, //登录弹窗展示
      loginEvm: "", //扫码登陆二维码
      evmTimer: null, //扫码状态获取计时器

      dy_id: "", //资源包单元id
      type_id: "", //资源包类型
      zdy_pic: "", //自定义资源包图片
      kemu_id: "",

      //是否是搜索页跳转来的
      isSearch: false,

      routeurl: "", //路径
      routeNmae: "", //路径名
      bigTapName: "", //同步资源页大菜单名
      fromPath: "", //同步资源地址
      zybFlTitle: "", //资源包分类名
      zybFlurl: "", //资源包分类地址

      jyk_url: "", //校验教学课地址
      type: 1, //展示课件类型还是教学课类型
      fm_file_url: "", //视频封面
      classsTitle: "", //视频标题

      is_sf: "", //是否收费
      is_pay:'',//是否支付
      gm_status: "", //是否购买

      goods_lists: [], //商品列表
      dialogVisible_fufei: false, //付费弹窗展示
      dialogVisible_duihuan: false, //兑换码弹窗展示
      jsm: "", //解锁码兑换码

      have_zip: "", //是否有压缩包下载链接
      downQwShow: false,
      zykf_file_url: "", //资源客服二维码
      xzMsg:{is_qw:'',type_id:'',baotype:'',kemu_id:'',nianji_id:'',},//下载完成弹窗所需相关

      //2022 8月新改二级目录
      tag_group: [], //综合目录数据列表
      qiweiTcShow: false, //添加企业微信提示框展示
      hdkf_file_url: "",
      dqkfevm: "", //公众号二维码
      qwTimer: null, //十分钟企业微信定时

      dyShow: false, //未订阅弹窗
      goods_id: "", //商品id

      erjiNum:[],//存在二级目录的数量
      erjimulu: false, //是否存在二级目录

      xzxxShow: false, //限制下载条数弹窗

      fwbtjShow:false,//服务包推荐弹窗 付费的未购买时弹出
      zixunShow:false,//咨询客服1二维码弹窗
      zykf1_file_url:'',//资源客服1二维码
      choseGoodId:'',//服务包推荐弹窗选中的商品id

      gxtxShow:false,//更新提醒弹窗展示
      gxkf_file_url:'',//售后客服

      fwbIsClose:true,//判断服务包是否可以关闭

      pageTimer:null,//上报停留时长

      noskShow:false,//没有试看视频的内容图展示
      skover:false,//试看结束后的展示内容
      notshijuan:false,//试卷不可查看

      is_new:'',//课件包是否是最新一期

      list:[],
      list2:[],

      jinduTimer:null,//视频播放进度定时器
      jindu:'',//视频播放进度
      sk_shichang:'',//选中视频的试看时长
      overfwbtjShow:false,//试看视频结束后服务包商品弹窗

      isdingzhi:'',//是否是从定制付费服务包详情页跳转过来的
      
      account_id:'',//用户id
      pl_page_size:3,//评论的展示数量
      pl_count:'',//评论数量
      last_score:'',//总评分
      pl_list:[],//评论列表

      dialogVisible_pinglun:false,//评论弹窗展示
      is_nm:0,//是否匿名
      textarea:'',//输入的评论
      score:0,//打分分数
      havepl:0,//是否评论过
      plid:'',//存在的评论id
      is_view:'',//右侧能否查看

      is_free:'',//包是否收费
    };
  },
  created() {
    console.log(this.$route.query, "query参数");
    this.gundongTop = this.$route.query.gundongTop;

    //是否是搜索页跳转来的
    if (
      this.$route.query.path == "/" ||
      this.$route.query.path == "/resourceJx" ||
      this.$route.query.isSearch
    ) {
      localStorage.setItem("path", this.$route.query.path);
      this.routeNmae = this.$route.query.routeName;
      this.routeurl = this.$route.query.path;
      this.dy_id = this.$route.query.dy_id;
      this.$emit("pathpath", this.routeurl);
      this.isSearch = 1;
    } else if (this.$route.query.bigTap) {
      localStorage.setItem("path", this.$route.query.path);
      this.routeNmae = this.$route.query.routeName;
      this.routeurl = this.$route.query.path;
      this.dy_id = this.$route.query.dy_id;
      this.$emit("pathpath", this.routeurl);
      this.bigTapName = this.$route.query.bigTapName;
      this.zybFlTitle = this.$route.query.zybFlTitle;
      this.fromPath = this.$route.query.path
        ? this.$route.query.path +
          "?from=res" +
          "&bigTap=" +
          this.$route.query.bigTap +
          "&page=" +
          this.$route.query.page +
          "&pageSize=" +
          this.$route.query.pageSize +
          "&zybFlId=" +
          this.$route.query.zybFlId
        : ""; //跳转过来的页面路径
      this.zybFlurl = this.fromPath; //跳转过来的页面路径
    }else if(this.$route.query.isdingzhi && this.$route.query.isdingzhi == 1){
      this.isdingzhi = this.$route.query.isdingzhi
      this.dingzhiQuery = this.$route.query.dingzhi
    }
    //回到顶部
    $(document).ready(function () {
      $(window).scrollTop(0);
    });
    console.log(this.$route.query.id);
    this.kejianbao_id = this.$route.query.id;
    islogin({
      md5key: localStorage.getItem("md5key"),
    }).then((res) => {
      console.log(1)
      this.loginStatus = res.retRes.login_status;
      this.getzybInfo(); //课件包详情
      // this.getgoodscommentlist();//评论列表
      if (this.loginStatus == 1) {
        //获取个人信息拿取广告图
        userinfo({
          md5key: localStorage.getItem("md5key"),
        }).then((res) => {
          console.log(res, "个人信息");
          const data = res.retRes;
          this.account_id = data.id;
          (this.nianji_ids = data.nianji_id),
            //获取详情页广告图
            banner({
              md5key: localStorage.getItem("md5key"),
              systypes_id: 10004,
              device_type_id: 201,
              nianji_ids: this.nianji_ids,
              kemu_ids: this.kemu_ids,
            }).then((res) => {
              console.log(res, "资源详情页广告图");
              this.bannerList = res.retRes;
            });
        });
         getgoodsweekpopup({
          md5key: localStorage.getItem("md5key"),
        }).then(res=>{
          if(res.retRes == 1){
            this.gxkf_file_url = this.kefuMsg.qwkf_file_url
            this.gxtxShow = true
          }
        })
      }
    });
  },
  mounted() {
      setTimeout(()=>{
        const banner = document.getElementsByClassName("guanggao")[0]; //广告图参照物
        console.log(banner.getBoundingClientRect().top,window.innerHeight,)
      },1000)
     //上报资源页停留
     page_times({
      table_name: "kejianbao",
      row_id: this.kejianbao_id,
      times: 1,
    });
    //获取系统信息里的上报时长
    sysinfo({
      md5key: localStorage.getItem("md5key"),
    }).then((res) => {
      const times = res.retRes.page_times2;
      //上报停留时长
      this.pageTimer = setInterval(() => {
        page_times({
          table_name: "kejianbao",
          row_id: this.kejianbao_id,
          times: times,
        });
      }, times * 1000);
    });

    //监听滚动
    window.addEventListener("scroll", this.handleScrollY, true);
  },
  beforeDestroy() {
    clearInterval(this.pageTimer);
    this.pageTimer = null;
    window.removeEventListener("scroll", this.handleScrollY, true);
    clearInterval(this.qwTimer);
    this.qwTimer = null;
    localStorage.setItem("isdj", "");
  },
  //自定义指令
  directives: {
    //进入页面点击全选按钮
    trigger: {
      inserted(el) {
        el.click();
      },
    },
  },
  methods: {
    //判断数字是否是浮点数
    isOf(num){
      if(String(num).indexOf('.')>-1){
        return true
      }else{
        return false
      }
    },
    //打开评论弹窗
    xiepl(){
      if (this.loginStatus == 0) {
        this.dialogVisible = true;
      }else{
        this.dialogVisible_pinglun = true
      }
    },
    //发表评论
    addgoodscomment(){
      if(this.score == 0){
        this.$message('请点击星星评分')
      }else if(this.textarea.length<8){
        this.$message('评论不要少于八个字')
      }else if(this.havepl == 0){
        addgoodscomment({
          md5key: localStorage.getItem("md5key"),
          kejianbao_id:this.kejianbao_id,
          content:this.textarea,
          score:this.score,
          is_anonymous:this.is_nm
        }).then(res=>{
          if(res.retInt == 1){
            this.$message('评论已提交审核！')
            this.dialogVisible_pinglun = false
          }else{
            this.$message(res.retErr)
          }
        })
      }else if(this.havepl == 1){
        updategoodscomment({
          md5key: localStorage.getItem("md5key"),
          id:this.plid,
          content:this.textarea,
          score:this.score,
          is_anonymous:this.is_nm
        }).then(res=>{
          if(res.retInt == 1){
            this.$message('评论已提交审核！')
            this.dialogVisible_pinglun = false
          }else{
            this.$message(res.retErr)
          }
        })
      }
      
    },
    //关闭评论弹窗
    pinglunClose(){
      this.dialogVisible_pinglun = false
    },
    //获取资源评论列表
    getgoodscommentlist(){
      getgoodscommentlist({
        md5key: localStorage.getItem("md5key"),
        kejianbao_id:this.kejianbao_id,
        page:1,
        page_size:this.pl_page_size,
      }).then(res=>{
        console.log(res)
        this.pl_count = res.retRes.count;
        this.last_score = res.retRes.last_score;
        if(res.retRes.count >0){
          this.pl_list = res.retRes.list
          this.pl_list.forEach(item=>{
            if(this.account_id && item.account_id == this.account_id){
              this.textarea = item.content;
              this.score = item.score;
              this.plid = item.id;
              return this.havepl = 1
            }
          })
        }
      })
    },
    //关闭服务包推荐弹窗
    closefwbtj(){
      this.fwbtjShow = false
      this.overfwbtjShow = false
    },
    //关闭更新弹窗
    gxtcClose(){
      this.gxtxShow = false
      closepopup({
        md5key: localStorage.getItem("md5key"),
      })
    },
    //去预约
    goyuyue(id,goodsweek_id){
      console.log(id,this.kemu_ids)
      this.$router.push({
          name: "Dingzhi",
          query: {
            id: id,
            kemu_id:this.kemu_ids,
            goodsweek_id:goodsweek_id,
            type:'dy',
            gopay:1,
          },
        });
    },
    //选择商品
    choseGood(id){
      this.choseGoodId = id
    },
    //点击商品咨询按钮
    zixun(){
      page_times({
        table_name: "goods_zxdj",
        row_id: this.goods_id,
        table_name_p:'kejianbao',
        row_id_p:this.kejianbao_id
      });
      console.log(123)
      this.fwbtjShow = false
      this.overfwbtjShow = false
      getkfinfobyip({
        md5key: localStorage.getItem("md5key"),
      }).then((res) => {
        this.zykf1_file_url = res.retRes.local_zxkf_info.file_url
      });
      this.zixunShow = true
    },
    //关闭问题咨询添加客服1二维码弹窗
    wtzxClose(){
      console.log(123)
      this.zixunShow = false
      if(this.type == 1){
        this.fwbtjShow = true
      }else{
        this.overfwbtjShow = true
      }
      
    },
    //获取课件包详情
    getzybInfo() {
      info_kejianbao({
        md5key: localStorage.getItem("md5key"),
        id: this.$route.query.id,
      }).then((res) => {
        if (res.retInt == 1) {
          console.log(res, "课件包详情");
          const data = res.retRes;
          this.title = data.title;
          this.update_time = data.update_time;
          this.view_nums = data.view_nums;
          this.sub_info = data.sub_info;
          this.is_sf = data.is_sf;
          this.is_free = data.is_free;
          this.xzMsg.nianji_id = this.nianji_ids;
          if(this.loginStatus == 1){
            getgmstatusbykejian({
              md5key: localStorage.getItem("md5key"),
              type:2,
              id:this.$route.query.id,
              goods_type:1,
              nianji_id:this.xzMsg.nianji_id
            }).then(res=>{
              const bmsg = res.retRes;
              //如果尊享包未购买全学年
              if(bmsg[0].is_pay == 0){
                this.xzMsg.baotype = 1;//推尊享包
              }else{
                this.xzMsg.baotype = 0;//推尊图书
              }
            })
          }
          this.is_pay = data.is_pay;
          this.is_new = data.is_new;
          this.gm_status = data.gm_status;
          this.list = data.lists;
          this.list2 = data.lists2;
          this.is_tj = data.is_tj;
          // this.kejianid = data.lists[0].id;
          this.from_int = data.from_int;
          this.type_id = data.type_id;
          if (this.type_id == 3 && this.loginStatus == 0) {
            this.dialogVisible = true;
          }
          if(this.type_id !=3){
            console.log(this.list)
            const noPay = []
            this.list.forEach(y=>{
              if(y.is_sf == 1 && (y.gm_status == 0 || y.is_pay == 0)){
                noPay.push(y)
              }
            })
            if(noPay.length != 0){
              getgoodsbykejian({
                md5key: localStorage.getItem("md5key"),
                type:1,
                id:noPay[0].id,
              }).then(res=>{
                console.log(res,"xin 商量列表")
                if (res.retRes.length != 0) {
                  this.goods_lists = res.retRes;
                  this.goods_id = res.retRes[0].goods_id;
                }
              })
            }
          }else if(this.type_id == 3){
            getgoodsbykejian({
              md5key: localStorage.getItem("md5key"),
              type:2,
              id:this.$route.query.id,
            }).then(res=>{
              console.log(res,"xin 商量列表")
              if (res.retRes.length != 0) {
                this.goods_lists = res.retRes;
                this.goods_id = res.retRes[0].goods_id;
              }
            })
          }

          this.zdy_pic = data.file_url;
          this.have_zip = data.have_zip;
          this.sc_status = data.sc_status;
          this.kemu_id = data.kemu_id;
          this.xzMsg.kemu_id = data.kemu_id
          this.kemu_ids = data.kemu_id;
          
           console.log(this.list,this.list2)
          for (var i = 0; i < data.tag_group.length; i++) {
            for (var j = i + 1; j < data.tag_group.length; j++) {
              //如果第一个比第二个大，就交换他们两个位置
              if (
                data.tag_group[i].group_lists2.length <
                data.tag_group[j].group_lists2.length
              ) {
                console.log(123);
                var temp = data.tag_group[i];
                data.tag_group[i] = data.tag_group[j];
                data.tag_group[j] = temp;
              }
            }
          }
          this.tag_group = data.tag_group;

          
          this.kejianList = [];
          this.checkedClass = [];
          this.group_lists = data.group_lists.filter((item) => {
            return item.lists.length != 0;
          });
          
          data.group_lists2.forEach((item) => {
            if (item.lists.length > 0) {
              this.group_lists2.push(item);
            }
          });
          this.group_lists3 = data.group_lists3.filter((item) => {
            return item.lists.length != 0;
          });
          console.log(this.group_lists ,this.group_lists2,this.group_lists3)
          // this.activeNames = []
          // this.activeNames2 = []
          //区分有二级目录和无二级目录的不同逻辑
          data.tag_group.forEach((item) => {
            if(item.tag_str != ""){
              this.erjiNum.push(item.tag_str)
            }
            
            let spzy = [];
              spzy = item.group_lists2.filter((item) => {
                return item.lists.length != 0;
              });
              //全选全部资源
              item.group_lists.forEach((list) => {
                this.kejianList.push(...list.lists);
                list.lists.forEach(y=>{
                  this.checkedClass.push(y)
                  // if(y.is_sf == 0 || (y.is_sf == 1 && y.gm_status == 1 && y.is_pay == 1)){
                  //   this.checkedClass.push(y)
                  // }
                })
              });
              spzy.forEach((list) => {
                list.lists.forEach(y=>{
                  if(y.nr_type_id == 2){
                    this.kejianList.push(y)
                  }
                  this.checkedClass.push(y)
                  // if(y.is_sf == 0 || (y.is_sf == 1 && y.gm_status == 1 && y.is_pay == 1)){
                  //   this.checkedClass.push(y)
                  // }
                })
              });
              //有付费且没购买的不选中
              if(this.kejianList.length >this.checkedClass.length){
                this.checkAll = false;
              } 
              if (item.tag_str == "") {
                // this.erjimulu = false;
                // this.activeNames3 = this.group_lists2.length > 0 ?[1] : [this.group_lists2.length + 1] ;
              } else {
                // this.erjimulu = true;
              }
          });
          this.erjimulu = this.erjiNum.length == 0?false:true
          console.log(this.erjimulu)
            if(!this.erjimulu){
              this.activeNames3 = this.group_lists2.length > 0 ?[1] : [this.group_lists2.length + 1] ;
            }
          console.log(this.kejianList,this.checkedClass)
          //实现进入页面全选所有课件
          this.idArr = [];
          this.urlArr = [];
          this.checkedClass.forEach((item) => {
            this.idArr.push(item.id);
          });

          //如果校验教学课有内容，右边默认展示第一个视频
          if (this.group_lists2.length != 0 && !this.$route.query.type) {
            console.log("展示教研课")
            if(this.erjimulu){
              let i = 0
              this.tag_group.forEach((item,index)=>{
                if(item.group_lists2.length !=0){
                  return i = index
                }
              })
              this.activeNames = [this.tag_group[i].tag_str]
              this.activeNames2 = [this.tag_group[i].group_lists2[0].group_title]
              this.activeNames = [this.tag_group[0].tag_str]
              this.activeNames2 = [this.tag_group[0].group_lists2[0].group_title]
            }else{
              this.activeNames3 = [this.group_lists2[0].group_title];
            }
            const id = this.erjimulu ? this.tag_group[0].group_lists2[0].lists[0].id : this.group_lists2[0].lists[0].id;
            this.type = 2;
            this.kejianid = id;
            const sp = this.erjimulu ? this.tag_group[0].group_lists2[0].lists[0] : this.group_lists2[0].lists[0];
            this.choseJyk(sp,id)
          } else if(this.group_lists2.length == 0 && !this.$route.query.type) {
            console.log("展示课件")
            if(this.erjimulu){
              let i = 0
              this.tag_group.forEach((item,index)=>{
                
                if(item.group_lists.length !=0){
                  return i = index
                }
              })
              console.log(i)
              this.activeNames = [this.tag_group[i].tag_str]
              this.activeNames2 = [this.tag_group[i].group_lists[0].group_title]
              // this.activeNames = [this.tag_group[0].tag_str]
              // this.activeNames2 = [this.tag_group[0].group_lists[0].group_title]
            }else{
              this.activeNames3 =  [this.group_lists[0].group_title] ;
            }
            this.choseKj(this.kejianList[0].id)
            console.log(this,this.kejianList)
            //如果从付费服务包点击过来的
          }else if(this.$route.query.type && this.$route.query.type == 1 && this.$route.query.infoid){
            if(this.erjimulu){
              this.list.forEach(item=>{
                if(item.id == this.$route.query.infoid){
                  this.activeNames = item.tag_str;
                  this.activeNames2 = item.type_str;
                  this.kejianid = item.id;
                  this.choseKj(this.$route.query.infoid)
                }
              })
            }else{
              this.list.forEach(item=>{
                if(item.id == this.$route.query.infoid){
                  this.activeNames3 = item.type_str;
                  this.kejianid = item.id;
                  this.choseKj(this.$route.query.infoid)
                }
              })
            }
          }else if(this.$route.query.type && this.$route.query.type == 2 && this.$route.query.infoid){
            if(this.erjimulu){
              this.list2.forEach(item=>{
                if(item.id == this.$route.query.infoid){
                  this.activeNames = item.tag_str;
                  this.activeNames2 = item.type_str;
                  this.kejianid = item.id;
                  console.log(item)
                  if(item.nr_type_id == 1){
                    this.choseJyk(item,item.id)
                  }else{
                    this.choseKj(item.id)
                  }
                  
                }
              })
            }else{
              this.list2.forEach(item=>{
                if(item.id == this.$route.query.infoid){
                  this.activeNames3 = item.type_str;
                  this.kejianid = item.id;
                  if(item.nr_type_id == 1){
                    this.choseJyk(item,item.id)
                  }else{
                    this.choseKj(item.id)
                  }
                }
              })
            }
            // const id = this.erjimulu
            //   ? this.tag_group[0].group_lists2[0].lists[0].id
            //   : this.group_lists2[0].lists[0].id;
            // this.type = 2;
            // this.kejianid = id;
            // const sp = this.erjimulu
            //   ? this.tag_group[0].group_lists2[0].lists[0]
            //   : this.group_lists2[0].lists[0];

            // const list = this.erjimulu
            //   ? this.tag_group[0].group_lists2[0].lists
            //   : this.group_lists2[0].lists;
            //   list.forEach(item=>{
            //     if(item.id == this.$route.query.infoid){
            //       this.choseJyk(item,item.id)
            //     }
            //   })
          }
        }
      });
    },
    //前往订阅
    goDingyue() {
      page_times({
        table_name: "goods_ckdj",
        row_id: this.goods_id,
        table_name_p:'kejianbao',
        row_id_p:this.kejianbao_id
      });
      this.$router.push({
        name: "Dingzhi",
        query: {
          kemu_id: this.kemu_id,
          // nianji_id: this.nianji_id,
          id: this.goods_id,
          type: "dy",
          gopay:1,
        },
      });
    },
    //收藏
    getCollect() {
      const ids = [];
      ids.push(this.kejianbao_id);
      create_accountzysc({
        md5key: localStorage.getItem("md5key"),
        ids: ids,
        type_id: 2,
        status: 1,
      }).then((res) => {
        if (res.retInt == 1) {
          info_kejianbao({
            md5key: localStorage.getItem("md5key"),
            id: this.$route.query.id,
          }).then((res) => {
            this.sc_status = res.retRes.sc_status;
          });
        }
      });
    },
    //取消收藏
    cancelCollect() {
      const ids = [];
      ids.push(this.kejianbao_id);
      create_accountzysc({
        md5key: localStorage.getItem("md5key"),
        ids: ids,
        type_id: 2,
        status: 2,
      }).then((res) => {
        if (res.retInt == 1) {
          info_kejianbao({
            md5key: localStorage.getItem("md5key"),
            id: this.$route.query.id,
          }).then((res) => {
            this.sc_status = res.retRes.sc_status;
          });
        }
      });
    },
    menuPlayer() {
      console.log("禁止右键");
    },
    //监听滚动事件
    handleScrollY() {
      const downLoad = document.getElementsByClassName("downLoad")[0]; //需要定位的下载栏
      const banner = document.getElementsByClassName("guanggao")[0]; //广告图参照物
      const left = document.getElementsByClassName("left")[0]; //左侧课件列表
      const title1 = document.getElementsByClassName("title1")[0]; //资源数量标题
      const right = document.getElementsByClassName("right")[0]; //资源数量标题
      // left.style.height = document.body.clientHeight -0 + 'px'
      // this.scrollHight = document.body.clientHeight -85 + 'px'
      // console.log(banner.getBoundingClientRect().top>window.innerHeight,)
      // console.log(banner.getBoundingClientRect().top,window.innerHeight,)
      const picHeight =banner.getBoundingClientRect().top-window.innerHeight + 40 ;
      // console.log(picHeight)
      if (
        parseInt(banner.getBoundingClientRect().top) > window.innerHeight +20 &&
        banner.getBoundingClientRect().bottom > 0
      ) {
        downLoad.style.position = "fixed";
      } else {
        downLoad.style.position = "absolute";
        downLoad.style.bottom = "0px";
      }

      if (
        title1.getBoundingClientRect().top < 40  && left.getBoundingClientRect().height < right.getBoundingClientRect().height
      ) {
        left.style.position = "fixed";
        left.style.top = "80px";
        right.style.marginLeft = "400px";
      } else if(title1.getBoundingClientRect().top > 40  ) {
        left.style.position = "static";
        right.style.marginLeft = "0px";
      }
      if (picHeight < 0) {
          left.style.top =80 + picHeight + "px";
        }
    },
    //折叠栏
    handleChange(e) {
      console.log(this.activeNames)
      // console.log(e);
      this.chosedfl = e;
    },
    //折叠栏
    handleChange2(e) {
      console.log(this.activeNames2)
      // console.log(e);
      this.chosedfl2 = e;
    },
    //折叠栏
    handleChange3(e) {
      console.log(this.activeNames3)
      // console.log(e);
      this.chosedfl3 = e;
    },
    //全选按钮
    handleCheckAllChange(val) {
      console.log(val)
      this.checkedClass = val ? this.kejianList : [];
      this.isIndeterminate = false;
      console.log(this.checkedClass,this.kejianList)
      // if(val){
      //   const noPay = []
      //   this.kejianList.forEach(y=>{
      //     if(y.is_sf == 0 || (y.is_sf == 1 && y.gm_status == 1 && y.is_pay == 1)){
      //       this.checkedClass.push(y)
      //     }
          
      //     if(y.is_sf == 1 && (y.gm_status == 0 || y.is_pay == 0)){
      //       noPay.push(y)
      //     }
          
      //     if(this.kejianList.length >this.checkedClass.length){
      //       this.checkAll = false;
      //       this.fwbtjShow = true
      //     }
      //     this.isIndeterminate = false;
      //   })
      //   console.log(noPay)
      //   if(noPay.length !=0){
      //       this.checkAll = false;
      //       this.fwbtjShow = true
      //   }
      // }else{
      //    this.checkedClass= []
      // }
      
      this.idArr = [];
      this.urlArr = [];
      this.checkedClass.forEach((item) => {
        this.idArr.push(item.id);
      });
      // console.log(this.idArr, "yaya");
      // plxz_url_arr({
      //   md5key: localStorage.getItem("md5key"),
      //   kejianbao_id: this.kejianbao_id,
      //   ids: this.idArr,
      // }).then((res) => {
      //   console.log(res, "xiazai链接数组");
      //   this.urlArr = res.retRes;
      // });
    },
    //单选和全选的联动
    handleCheckedCitiesChange(value) {
      // console.log(this.checkedClass,value, "单选按钮");
      let checkedCount = value.length;
      this.checkAll = checkedCount === this.kejianList.length;
      this.isIndeterminate =
        checkedCount > 0 && checkedCount < this.kejianList.length;
        console.log(this.isIndeterminate,checkedCount,this.kejianList.length)
      this.idArr = [];
      this.checkedClass.forEach((item) => {
        this.idArr.push(item.id);
      });
      console.log(this.checkedClass,this.kejianList)
    },
    //选择课件，右侧展示
    choseKj(id) {
      if (!localStorage.getItem("isdj") && this.is_sf == 1 && this.loginStatus == 1) {
        qywx_status({
          md5key: localStorage.getItem("md5key"),
          // kf_account:this.kefuMsg.zykf_account
        }).then((res) => {
          console.log(res);
          if (res.retRes.qywx_status == 0) {
            ffzyb_status({
              md5key: localStorage.getItem("md5key"),
            }).then((res) => {
              if (res.retRes.is_dy == 1) {
                //未订阅 资源客服2二维码
                this.zykf_file_url = this.kefuMsg.zykf1_file_url;
                this.qiweiTcShow = true;
              } else {
                //已订阅 资源客服1二维码
                this.zykf_file_url = this.kefuMsg.zykf_file_url;
                this.qiweiTcShow = true;
              }
            });
          }
        });
        localStorage.setItem("isdj", 1);
      }
      this.type = 1;
      // console.log(id);
      this.kejianid = id;
      const topHeight =
        document.getElementsByClassName("beikeziyuan")[0].offsetHeight;
      // console.log(topHeight, "顶部高度顶部高度");
      //点击后回到顶部
      $(document).ready(function () {
        $(window).scrollTop(topHeight + 84);
      });
      //下载按钮再次固定底部
      const downLoad = document.getElementsByClassName("downLoad")[0]; //需要定位的下载栏
      downLoad.style.position = "fixed";
      info_kejian({
        md5key: localStorage.getItem("md5key"),
        id: id,
      }).then((res) => {
          console.log(res, "课件详情");
          this.filePicList = res.retRes.file_lists;
          this.kejianTitle = res.retRes.title;
          this.suffix = res.retRes.suffix;
          this.v_per = res.retRes.v_per;
          if(this.is_sf == 1 && (this.gm_status != 1 || this.is_pay !=1) && res.retRes.type_id == 2 && this.is_new == 1){
            this.notshijuan = true
          }else{
            this.notshijuan = false
          }
          if (res.retRes.file_lists.length == 0 && !this.notshijuan) {
            this.noFileShow = true;
          } else {
            this.noFileShow = false;
          }
          this.is_view = this.filePicList[0].is_view
      });
    },
    //获取文件下载链接
    // downLoad() {
    //   if (this.loginStatus == 1) {
    //     //当前已选中课件的下载链接数组
    //     plxz_url_arr({
    //       md5key: localStorage.getItem("md5key"),
    //       kejianbao_id: this.kejianbao_id,
    //       ids: this.idArr,
    //     }).then((res) => {
    //       // console.log(res, "xiazai链接数组");
    //       this.urlArr = res.retRes;
    //       this.urlArr.forEach((item) => {
    //         this.downloadFile(item);
    //         // console.log(item);
    //       });
    //     });
    //     // console.log(this.urlArr, "asdasdas");
    //     t;
    //   } else {
    //     this.dialogVisible = true;
    //     wxdlewm({
    //       md5key: localStorage.getItem("md5key"),
    //     }).then((res) => {
    //       if (res.retInt == 1) {
    //         console.log(res, "登录二维码");
    //         this.loginEvm = res.retRes.file_url;
    //         this.evmTimer = setInterval(() => {
    //           upwxdl().then((res) => {
    //             console.log(res, "扫码登录状态");
    //             if (res.retInt == 1 && res.retRes.login_status == 1) {
    //               let { href } = this.$router.resolve({
    //                 path: "/resource/resDetails",
    //                 query: {
    //                   id: this.kejianid,
    //                   gundongTop: document.documentElement.scrollTop,
    //                   path: this.routeurl,
    //                   routeName: this.routeNmae,
    //                 },
    //               });
    //               window.location.href = href;
    //               clearInterval(this.evmTimer);
    //               this.evmTimer = null;
    //             } else if (res.retInt == 0) {
    //               this.isyouxiao = false;
    //               clearInterval(this.evmTimer);
    //               this.evmTimer = null;
    //             }
    //           });
    //         }, 2000);
    //       }
    //     });
    //   }
    // },
    downLoad() {
      // console.log(this.loginStatus, this.is_sf, this.gm_status);
      // if (this.loginStatus == 0) {
      //   this.dialogVisible = true;
      // } else if (this.loginStatus == 1 && this.is_sf == 0) {
      //   //当前已选中课件的下载链接数组
      //   this.getDownUrl();
      // } else if (
      //   this.loginStatus == 1 &&
      //   this.is_sf == 1 &&
      //   this.gm_status == 0
      // ) {
      //   this.dialogVisible_fufei = true;
      // } else if (
      //   this.loginStatus == 1 &&
      //   this.is_sf == 1 &&
      //   this.gm_status == 1
      // ) {
      //   //当前已选中课件的下载链接数组
      //   this.getDownUrl();
      // }
      if (this.loginStatus == 0) {
        this.dialogVisible = true;
      }else{
        const noPay = []
        this.checkedClass.forEach(y=>{
          if(y.is_sf == 1 && (y.gm_status == 0 || y.is_pay == 0)){
            noPay.push(y)
          }
        })
        console.log(noPay)
        if(noPay.length !=0 && this.is_free != 1){

          if(this.type_id !=3){
            getgoodsbykejian({
              md5key: localStorage.getItem("md5key"),
              type:1,
              id:noPay[0].id,
            }).then(res=>{
              console.log(res,"xin 商量列表")
              if (res.retRes.length != 0) {
                this.goods_lists = res.retRes;
                this.goods_id = res.retRes[0].goods_id;
              }
            })
          }else if(this.type_id == 3){
            getgoodsbykejian({
              md5key: localStorage.getItem("md5key"),
              type:2,
              id:this.$route.query.id,
            }).then(res=>{
              console.log(res,"xin 商量列表")
              if (res.retRes.length != 0) {
                this.goods_lists = res.retRes;
                this.goods_id = res.retRes[0].goods_id;
              }
            })
          }
          this.fwbtjShow = true

        }else{
          this.getDownUrl();
        }
      }
    },
    //获取当前已选中课件的下载链接数组
    getDownUrl() {
      download_nums({
        md5key: localStorage.getItem("md5key"),
        kejianbao_id: this.kejianbao_id,
        kejian_ids: this.idArr,
      }).then((res) => {
        if (res.retInt == 1 && res.retRes.xz_status == 1) {
          plxz_url_arr({
            md5key: localStorage.getItem("md5key"),
            kejianbao_id: this.kejianbao_id,
            ids: this.idArr,
          }).then((res) => {
            if (res.retInt == 1) {
              this.urlArr = res.retRes;
              var i = 0;
              const that = this;
              var timer = setInterval(function () {
                console.log(that.urlArr[i]);
                that.downloadFile(that.urlArr[i]);
                i++;
                if (i > that.urlArr.length) {
                  clearInterval(timer);
                }
              }, 2000);
              setTimeout(() => {
                qywx_status({
                  md5key: localStorage.getItem("md5key"),
                  // kf_account:this.kefuMsg.zykf_account
                }).then((res) => {
                  console.log(res);
                  if (res.retRes.qywx_status == 0) {
                    this.xzMsg.is_qw = 0;
                    ffzyb_status({
                      md5key: localStorage.getItem("md5key"),
                    }).then((res) => {
                      if (res.retRes.is_dy == 1) {
                        //未订阅 资源客服2二维码
                        this.zykf_file_url = this.kefuMsg.zykf1_file_url;
                        this.downQwShow = true;
                      } else {
                        //已订阅 资源客服1二维码
                        this.zykf_file_url = this.kefuMsg.zykf_file_url;
                        this.downQwShow = true;
                      }
                    });
                  }else{
                    this.xzMsg.is_qw = 1;
                    this.downQwShow = true;
                  }
                });
              }, 4000);
            }
          });
        } else {
          ffzyb_status({
            md5key: localStorage.getItem("md5key"),
          }).then((res) => {
            if (res.retRes.is_dy == 1) {
              //未订阅 资源客服2二维码
              this.zykf_file_url = this.kefuMsg.zykf1_file_url;
              this.xzxxShow = true;
            } else {
              //已订阅 资源客服1二维码
              this.zykf_file_url = this.kefuMsg.zykf_file_url;
              this.xzxxShow = true;
            }
          });
        }
      });
    },
    downloadFile(url) {
      const iframe = document.createElement("iframe");
      iframe.style.display = "none";
      iframe.style.height = 0;
      iframe.src = url;
      document.body.appendChild(iframe);
      // 1s之后删除
      setTimeout(() => {
        iframe.remove();
        // console.log(url);
      }, 1000);
    },
    //整包下载
    downLoadall() {
      download_nums({
        md5key: localStorage.getItem("md5key"),
        kejianbao_id: this.kejianbao_id,
        kejian_ids: this.idArr,
      }).then((res) => {
        if (res.retInt == 1 && res.retRes.xz_status == 1) {
          plxz_url_arr({
            md5key: localStorage.getItem("md5key"),
            kejianbao_id: this.kejianbao_id,
            ids: this.idArr,
          }).then((res) => {
            url_kejianbao({
              md5key: localStorage.getItem("md5key"),
              id: this.kejianbao_id,
            }).then((res) => {
              console.log(res);
              if (res.retInt == 1) {
                this.downloadFile(res.retRes.download_file_url);
              }
            });
          });
        } else {
          ffzyb_status({
            md5key: localStorage.getItem("md5key"),
          }).then((res) => {
            if (res.retRes.is_dy == 1) {
              //未订阅 资源客服2二维码
              this.zykf_file_url = this.kefuMsg.zykf1_file_url;
              this.xzxxShow = true;
            } else {
              //已订阅 资源客服1二维码
              this.zykf_file_url = this.kefuMsg.zykf_file_url;
              this.xzxxShow = true;
            }
          });
        }
      });
    },
    //选择课程
    choseJyk(sp,id) {
      console.log(sp,id);
      const topHeight =
        document.getElementsByClassName("beikeziyuan")[0].offsetHeight;
      $(document).ready(function () {
        $(window).scrollTop(topHeight + 84);
      });
      this.type = 2;
      this.kejianid = id;
      this.fm_file_url = ''
      this.jyk_url = ''
      // // console.log(topHeight, "顶部高度顶部高度");
      // //点击后回到顶部
      this.classsTitle = sp.title;
        if(this.is_sf == 1 && (this.gm_status == 0 || this.is_pay !=1) ){
          this.sk_shichang = sp.sk_shichang;
          if(sp.sk_status == 1){
            this.fm_file_url = sp.fm_file_url;
            this.jyk_url = sp.video_file_url;
            // this.$refs.startvideo.play()
            this.noskShow = false
            this.jinduTimer = setInterval(() => {
              this.jindu = this.$refs.startvideo.currentTime
              // console.log(this.jindu); //获取视频当前播放时间
              if(this.jindu > this.sk_shichang){
                this.$refs.startvideo.pause()
                this.skover = true;
              }else{
                this.skover = false;
              }
            }, 1000);
          }else{  
            console.log('哈哈哈')
            this.fm_file_url = sp.fm_file_url;
            this.jyk_url = sp.video_file_url;
            this.noskShow = true
            this.$refs.startvideo.pause()
            
          }
        }else{
          this.jyk_url = sp.video_file_url
          this.fm_file_url = sp.fm_file_url;
          this.noskShow = false
        }
      
    },
    //选择活动跳转
    chosehd(id,type){
      let { href } = this.$router.resolve({
        path: "/active/fullScreen",
        query: {
          id: id,
          type: type,
          from:'活动中心'
        },
      });
      window.open(href, "activeRes");
    },
    //跳转广告图
    advert(href) {
      window.open(href, "_blank");
    },
    //关闭登录弹窗
    handleClose() {
      this.dialogVisible = false;
    },
    //关闭企业微信弹窗
    qwClose() {
      this.qiweiTcShow = false;
      this.hdkf_file_url = this.kefuMsg.hdkf_file_url;
      this.qwTimer = setInterval(() => {
        qywx_status({
          md5key: localStorage.getItem("md5key"),
          // kf_account:this.kefuMsg.hdkf_account
        }).then((res) => {
          console.log(res);
          if (res.retRes.qywx_status == 0) {
            this.qiweiTcShow = true;
            clearInterval(this.qwTimer);
            this.qwTimer = null;
          }
        });
      }, 600000);
    },
    //关闭付费弹窗
    fufeiClose() {
      this.dialogVisible_fufei = false;
    },
    //关闭兑换码弹窗
    duihuanClose() {
      this.dialogVisible_duihuan = false;
    },
    //关闭企业微信弹窗
    qwtcClose() {
      this.downQwShow = false;
    },
    //关闭下载限制弹窗
    xzxxClose() {
      this.xzxxShow = false;
    },
    //前往账号登录
    goLogin() {
      this.$router.push({
        name: "Login",
        query: {
          zhanghao: 1,
        },
      });
    },
    //兑换码解锁
    jsmJs() {
      console.log(this.jsm);
      if (!this.jsm) {
        this.$message({
          message: "请输入正确的兑换码！",
          type: "warning",
        });
      } else {
        sy_goodsjsm({
          md5key: localStorage.getItem("md5key"),
          numbers: this.jsm,
        }).then((res) => {
          if (res.retInt == 1) {
            this.$message.success("解锁成功！");
            this.reload();
          } else {
            this.$message({
              message: res.retErr,
              type: "warning",
            });
          }
        });
      }
    },
  },
};
</script>
<style>
/* 面包屑 */
.el-breadcrumb__inner a,
.el-breadcrumb__inner.is-link:hover {
  color: #08a579;
}
.el-breadcrumb__inner a,
.el-breadcrumb__inner.is-link {
  font-weight: normal;
  color: #626366;
}
.el-breadcrumb__separator {
  color: #626366;
}
</style>
<style lang="less" scoped>
#container {
  width: 100%;
  background-color: #f0f0f5;
  overflow: hidden;
  span {
    user-select: none;
  }
  .top {
    margin: 0 auto;
    width: 1200px;
    overflow: hidden;
    .bread {
      display: flex;
      margin: 20px auto;
      font-size: 14px;
      font-family: Microsoft YaHei;
      font-weight: 400;
      color: #626366;
      line-height: 24px;
      .el-breadcrumb {
        font-size: 14px;
        line-height: 24px;
        /deep/.el-breadcrumb__item:last-child {
          .el-breadcrumb__inner {
            color: #08a579;
            white-space: wrap;

            p {
              width: 350px;
              white-space: nowrap;
              overflow: hidden;
              text-overflow: ellipsis;
            }
          }
        }
      }
    }
    .beikeziyuan {
      display: flex;
      align-items: center;
      background-color: #fff;
      .beike {
        display: flex;
        align-items: center;
        margin-bottom: 20px;
        width: 900px;
        // height: 150px;
        background-color: #fff;
        img {
          margin: 0px 25px 0 25px;
          width: 64px;
          height: 64px;
        }
        .details {
          width: 800px;
          padding-top: 20px;
          .title {
            display: flex;
            align-items: center;
            margin: 0;
            margin-bottom: 16px;
            span {
              display: inline-block;
              position: relative;
              top: 2px;
              margin-right: 10px;
              width: 40px;
              height: 20px;
              background: #f85230;
              border-radius: 4px;
              font-size: 14px;
              font-family: Microsoft YaHei;
              color: #ffffff;
              line-height: 20px;
              text-align: center;
            }
            img{
              position: relative;
              top: 2px;
              margin: 0;
              margin-right: 10px;
              height: auto;
              width: 40px;
            }
            h3 {
              // margin-top: 22px;
              max-width: 695px;
              font-size: 16px;
              font-family: Microsoft YaHei;
              font-weight: bold;
              color: #333333;
              white-space: nowrap;
              text-overflow: ellipsis;
              overflow: hidden;
            }
            .money {
              display: flex;
              margin-left: 5px;
              img {
                position: relative;
                top: 2px;
                margin: 0;
                margin-right: 5px;
                width: 12px;
                height: 12px;
              }
              color: #11aaf9;
            }
          }
          .msg {
            padding: 0;
            // width: 700px;
            font-size: 14px;
            font-family: Microsoft YaHei;
            color: #626366;
            p {
              display: -webkit-box;
              -webkit-box-orient: vertical;
              -webkit-line-clamp: 3;
              overflow: hidden;
              line-height: 30px;
              margin-bottom: 5px;
              font-size: 12px;
              overflow: hidden;
            }
            ul {
              li {
                margin-right: 15px;
                display: inline-block;
                white-space: nowrap;
                text-overflow: ellipsis;
                overflow: hidden;
              }
            }
            .bottom {
              margin-top: 15px;
              margin-bottom: 15px;
              color: #939599;
              font-size: 12px;
              font-family: Microsoft YaHei;
              .upTime {
                margin-right: 29px;
              }
              .seeNum {
                margin-right: 30px;
                i {
                  margin-right: 5px;
                }
              }
              .recNum {
                a {
                  color: red;
                }
              }
            }
          }
        }
      }
      .zidingyi {
        margin-bottom: 0;
        img {
          margin: 20px;
          width: 100px;
          height: 120px;
        }
        .details {
          display: flex;
          flex-direction: column;
          justify-content: space-between;
          height: 120px;
          margin-top: 0px;
          padding: 0;
          .title {
            margin: 0;
            margin-bottom: 4px;
          }
          .msg {
            p {
              position: relative;
              top: -30px;
            }
            .bottom {
              margin-bottom: 4px;
            }
          }
        }
      }
      .collect {
        display: flex;
        flex-direction: column;
        align-items: center;
        margin-right: 60px;
        cursor: pointer;
        width: 100px;
        i {
          margin-bottom: 5px;
          font-size: 28px;
          color: #c8cacc;
        }
        img{
          margin-bottom: 5px;
          width: 28px;
          height: 28px;
        }
        p {
          font-size: 12px;
          color: #969799;
        }
      }
      .getsc {
        i {
          background-color: linear-gradient(-45deg, #7defcf, #05bc89);
          color: #05bc89;
        }
        p {
          color: #08a579;
        }
      }
      .pl{
        display: flex;
        flex-direction: column;
        align-items: center;
        margin-right: 50px;
        cursor: pointer;
        width: 160px;
        img{
          margin-bottom: 5px;
          width: 28px;
          height: 28px;
        }
        p {
          font-size: 12px;
          color: #969799;
        }
      }
    }
  }
  .content {
    margin: 0 auto;
    margin-bottom: 20px;

    width: 1200px;
    background-color: #fff;
    border: 1px solid #ccc;
    .title1 {
      display: flex;
      justify-content: space-between;
      height: 40px;
      line-height: 40px;
      font-size: 14px;
      border-bottom: 1px solid #ccc;
      p {
        margin-left: 20px;
      }
      span {
        margin-right: 20px;
        color: #969799;
      }
    }
    .box {
      display: flex;
      .left {
        position: static;
        top: 0;
        width: 399px;
        border-right: 1px solid #ccc;
        border-radius: 1px solid #ccc;
        height: 85vh !important;
        overflow-y: scroll;

        .zyBox {
          background: #f5f7fa;
          /deep/.el-checkbox {
            display: flex;
            align-items: center;
            // margin: 20px 0 20px 23px;
            // margin-top: 10px;
            margin-left: 10px;
            padding-left: 10px;
            width: 360px;
            height: 107px;
            line-height: 56px;
            border-radius: 10px;
            img {
              width: 59px;
              height: 67px;
            }
            .msg {
              display: inline-block;
              // padding: 20px 0;
              padding-left: 20px;
              width: 210px;
              white-space: pre-wrap;
              display: -webkit-box;
              -webkit-box-orient: vertical;
              -webkit-line-clamp: 3;
              overflow: hidden;
              p{
                overflow: hidden;
                text-overflow: ellipsis;
                display: -webkit-box;
                -webkit-line-clamp: 3;
                -webkit-box-orient: vertical;
                img{
                  position: relative;
                  top: 4px;
                  width: 33px;
                  height: 18px;
                }
              }
            }
            .el-checkbox__label {
              display: flex;
              align-items: center;
              height: 56px;
            }
          }
        }
        .choseKj {
          background: #ebfaf5;
          border: 1px solid #08a579;
          .msg {
            color: #08a579;
          }
        }
        /deep/.el-checkbox:first-child {
          // margin-top: 20px;
        }
        /deep/.el-collapse-item__content {
          padding-bottom: 0;
          // max-height: 77vh !important;
          // overflow-y: scroll;
        }
        .srcollBox {
          background: #f5f7fa;
          overflow: hidden;
          .jybox {
            display: flex;
            align-items: center;
            margin-top: 10px;
            margin-left: 15px;
            cursor: pointer;
            width: 360px;
            height: 107px;
            border-radius: 10px;
            background: #f5f7fa;
            img {
              margin-left: 20px;
            }
            .msg {
              display: inline-block;
              padding-left: 20px;
              width: 210px;
              white-space: pre-wrap;
              display: -webkit-box;
              -webkit-box-orient: vertical;
              -webkit-line-clamp: 3;
              overflow: hidden;
            }
          }
          // .choseKj {
          //   background: #ebfaf5;
          //   border: 1px solid #08a579;
          //   .msg {
          //     color: #08a579;
          //   }
          // }
          .hdbox {
            display: flex;
            align-items: center;
            margin-top: 10px;
            margin-left: 15px;
            cursor: pointer;
            width: 360px;
            height: 107px;
            border-radius: 10px;
            background: #f5f7fa;
            img {
              width: 140px;
              margin-left: 0px;
            }
            .msg {
              position: relative;
              display: inline-block;
              padding-left: 10px;
              width: 210px;
              height: 80px;
              white-space: pre-wrap;
              display: -webkit-box;
              -webkit-box-orient: vertical;
              -webkit-line-clamp: 3;
              overflow: hidden;
              p{
                line-height: 20px;
                width: 210px;
                overflow: hidden;
                text-overflow: ellipsis;
                display: -webkit-box;
                -webkit-line-clamp: 2;
                -webkit-box-orient: vertical;
              }
              span{
                position: absolute;
                top: 50px;
                left: 16px;
                color: #303113;
              }
              .zhuangtai{
                position: absolute;
                right: 6px;
                top: 48px;
                width: 80px;
                height: 30px;
                font-size: 12px;
                text-align: center;
                line-height: 30px;
                color: #FFF;
                border-radius: 16px;
                background: #08a579;
              }
            }
            .msg:hover{
              p{
                color: #08a579;
              }
            }
          }
        }
        /deep/.el-collapse {
          // margin-top: 10px;
        }
        /deep/.el-checkbox__inner::before {
          display: none !important;
        }
        /deep/.el-collapse-item__wrap {
          border: none;
        }
        /deep/.el-collapse-item__header {
          margin-top: 10px;
          .yijiTitle {
            display: flex;
            justify-content: space-between;
            background-color: #f0f2f5;
            width: 100%;
            height: 56px;
            p {
              margin-left: 20px;
              width: 290px;
              line-height: 56px;
              color: #333333;
              font-weight: 900;
              // width: 200px;
              white-space: nowrap;
              overflow: hidden;
              text-overflow: ellipsis;
            }
            span {
              margin-right: 20px;
              line-height: 56px;
              color: #969799;
              font-size: 12px;
            }
            i {
              display: none;
            }
          }
          .choseYijiTitle {
            background: #e8fbf6;
            p,
            span {
              color: #08a579;
            }
          }
          .erjiTitle {
            display: flex;
            justify-content: space-between;
            // position: relative;
            // top: 10px;
            // margin-top: 30px;
            background-color: #f5f7fa;
            width: 100%;
            height: 56px;
            border-radius: 10px;
            p {
              margin-left: 40px;
              width: 270px;
              line-height: 56px;
              color: #333333;
              font-weight: 900;
              white-space: nowrap;
              overflow: hidden;
              text-overflow: ellipsis;
            }
            span {
              margin-right: 20px;
              line-height: 56px;
              color: #969799;
              font-size: 12px;
            }
            i {
              display: none;
            }
          }
          .el-collapse-item__arrow {
            display: none;
          }
        }
        .quanxuan {
          margin: 0;
          margin-left: 10px;
          height: 45px;
          display: flex;
          align-items: center;
          margin-left: 10px;
          padding-left: 10px;
          line-height: 56px;
        }
      }
      ::-webkit-scrollbar {
        width: 2px;
      }
      ::-webkit-scrollbar-track {
        background-color: #f5f5f5;
        -webkit-box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.1);
        border-radius: 5px;
      }
      ::-webkit-scrollbar-thumb {
        background-color: rgba(0, 0, 0, 0.2);
        border-radius: 5px;
      }
      ::-webkit-scrollbar-button {
        background-color: #eee;
        display: none;
      }
      ::-webkit-scrollbar-corner {
        background-color: black;
      }
      .right {
        position: relative;
        margin-left: 0px;
        width: 800px;
        padding-bottom: 60px;
        img {
          width: 100%;
        }
        .videoBox{
          .nosk{
            position: absolute;
            top: 0;
            left: 0;
            width: 800px;
            height: 480px;
            background: #393535b3;
            text-align: center;
            line-height: 480px;
            font-size: 20px;
            color: #FFF;
          }
          .skover{
            position: absolute;
            top: 0;
            left: 0;
            width: 800px;
            height: 480px;
            background: #393535b3;
            text-align: center;
            line-height: 480px;
          }
        }
        .cannotsee{
          margin-bottom: 200px;
          text-align: center;
          img{
            margin-top: 20px;
            width: 400px;
          }
          p{
            color: #666;
            font-size: 16px;
          }
        }
        .mp3File {
          display: flex;
          flex-direction: column;
          align-items: center;
          text-align: center;
          height: 448px;
          img {
            margin-top: 100px;
            width: 74px;
            height: 84px;
          }
          p {
            margin-top: 15px;
            margin-bottom: 60px;
            font-size: 16px;
            text-align: center;
          }
          audio {
            width: 600px;
          }
        }
        .noFile {
          height: 91%;
          // margin-top: 100px;
          p {
            width: 300px;
            margin: 0 auto;
            padding: 100px 0;
            font-size: 14px;
          }
        }
        .jindu {
          position: absolute;
          bottom: 120px;
          width: 800px;
          height: 50px;
          line-height: 50px;

          text-align: center;
          background-image: linear-gradient(
            180deg,
            hsla(0, 0%, 100%, 0),
            #fff 86%
          );
        }
        .jindutext {
          text-align: center;
          height: 60px;
          line-height: 60px;
          font-size: 14px;
          color: #999;
        }
        .downLoad {
          display: flex;
          justify-content: space-between;
          align-items: center;
          position: fixed;
          bottom: 0;
          width: 800px;
          height: 60px;
          background: #ffffff;
          border-top: 1px solid #dee0e3;
          border-bottom: 1px solid #dee0e3;
          border-left: 1px solid #dee0e3;
          p {
            margin-left: 20px;
            width: 500px;
            font-size: 14px;
            color: #646566;
            display: -webkit-box; //对象作为弹性伸缩盒子模型显示
            overflow: hidden; //溢出隐藏
            // -webkit-box-orient: vertical; //设置伸缩盒子对象的子元素的排列方式
            -webkit-line-clamp: 1; //设置 块元素包含的文本行数
          }
          .choseDL {
            display: flex;
            position: relative;
            // display: inline-block;
            margin-right: 20px;
            text-align: center;
            font-size: 14px;
            color: #fff;
            line-height: 40px;
            background: #08a579;
            // width: 120px;
            height: 40px;

            border-radius: 4px;
            cursor: pointer;
            .choseAgain {
              .choseLists {
                display: none;
                position: absolute;
                bottom: 40px;
                right: 00px;
                width: 400px;
                max-height: 600px;
                min-height: 100px;
                border: 1px solid #e6e6e6;
                background: #fff;
                border-radius: 10px;
                overflow-y: scroll;
                box-shadow: 0 0 10px 0 rgb(0 0 0 / 10%);
                .dLtop {
                  display: flex;
                  justify-content: space-between;
                  margin-left: 10px;
                  margin-top: 12px;
                  padding-bottom: 10px;
                  border-bottom: 1px solid #e6e6e6;
                  p {
                    margin: 0;
                  }
                }
                .dLits {
                  margin: 10px 3px;
                  .el-checkbox {
                    display: flex;
                    align-items: center;
                    margin: 20px 10px;
                    .msg {
                      img{
                        position: relative;
                        top: 4px;
                        width: 30px;
                      }
                      text-align: left;
                      width: 320px;
                      white-space: nowrap;
                      overflow: hidden;
                      text-overflow: ellipsis;
                    }
                  }
                }
              }
              ::-webkit-scrollbar {
                width: 2px;
              }
              ::-webkit-scrollbar-track {
                background-color: #f5f5f5;
                -webkit-box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.1);
                border-radius: 5px;
              }
              ::-webkit-scrollbar-thumb {
                background-color: rgba(0, 0, 0, 0.2);
                border-radius: 5px;
              }
              ::-webkit-scrollbar-button {
                background-color: #eee;
                display: none;
              }
              ::-webkit-scrollbar-corner {
                background-color: black;
              }
              i {
                display: inline-block;
                width: 40px;
              }
            }
            .choseAgain:hover {
              .choseLists {
                display: block;
              }
            }
            span {
              display: inline-block;
              padding-right: 10px;
              // width: 80px;
              border-left: 1px solid #74c3a5;
            }
            span:active {
              opacity: 0.8;
            }
          }
        }
        .alldown {
          text-align: center;
          width: 90px;
          height: 40px;
          font-size: 14px;
          color: #fff;
          line-height: 40px;
          background: #08a579;
          border-radius: 4px;
          cursor: pointer;
          user-select: none;
        }
        .alldown:active {
          opacity: 0.8;
        }
      }
    }
  }
  .banner {
    margin: 0px auto;
    margin-bottom: 20px;
    width: 1200px;
    height: 160px;
    background: #d3d6de;
  }
  .guanggao {
    margin: 0 auto;
    margin-bottom: 20px;
    width: 1200px;
    height: 160px;
    background: #d3d6de;
    cursor: pointer;
    .banner {
      margin: 0px auto;
      width: 100%;
      .el-carousel {
        width: 100%;
        height: 160px;
        // border-radius: 20px;
        .el-carousel__item {
          width: 100%;
          height: 160px;
          img {
            width: 100%;
            height: 160px;
          }
        }
      }
    }
  }
  .pinglun{
    width: 1200px;
    margin: 20px auto;
    background: #FFF;
    overflow: hidden;
    .plTop{
      
      height: 116px;
      border-bottom: 1px solid #E6E6E6;
      .caozuo{
        display: flex;
        align-items: center;
        margin-top: 20px;
        h4{
          margin-right: 20px;
          margin-left: 20px;
          font-size: 16px;
          color: #333333;
          font-weight: 600;
        }
        .xie{
          position: relative;
          span{
            display: inline-block;
            text-align: center;
            width: 96px;
            height: 28px;
            background: #08A579;
            border-radius: 4px;
            color: #FFF;
            font-size: 14px;
            line-height: 28px;
            cursor: pointer;
            user-select: none;
          }
          span:active{
            opacity: .8;
          }
          img{
            position: absolute;
            top: -10px;
            left: 56px;
            width: 64px;
          }
        }
      }
      .pingfen{
        display: flex;
        align-items: center;
        margin-left: 18px;
        margin-top: 10px;
        .leftpf{
          font-size: 40px;
          color: #333;
          font-weight: 600;
        }
        .rightpf{
          margin-left: 18px;
          /deep/.el-rate__icon {
            margin-right: 0;
            font-size: 20px;
          }
          p{
            margin-top: 6px;
            font-size: 12px;
            color: #999;
          }
        }
        .xie{
          position: relative;
          margin-left: 36px;
          span{
            display: inline-block;
            text-align: center;
            width: 96px;
            height: 28px;
            background: #08A579;
            border-radius: 4px;
            color: #FFF;
            font-size: 14px;
            line-height: 28px;
            cursor: pointer;
            user-select: none;
          }
          span:active{
            opacity: .8;
          }
          img{
            position: absolute;
            top: -10px;
            left: 56px;
            width: 64px;
          }
        }
      }
      
    }
    .plLists{
      display: flex;
      flex-direction: column;
      .list{
        position: relative;
        display: flex;
        flex-direction: column;
        border-bottom: 1px solid #E6E6E6;
        .tec{
          display: flex;
          align-items: center;
          margin-left: 20px;
          margin-top: 20px;
          .tx{
            margin-right: 10px;
            width: 48px;
            height: 48px;
            border-radius: 50%;
            img{
              width: 100%;
              border-radius: 50%;
            }
          }
          .msg{
            display: flex;
            flex-direction: column;
            h4{
              margin-left: 2px;
              color: #333333;
              font-size: 16px;
              font-weight: 600;
              line-height: 30px;
            }
            .rate {
              display: flex;
              align-items: center;
              /deep/.el-rate__icon {
                margin-right: 0;
                font-size: 20px;
              }
              .riqi{
                margin-left: 16px;
                font-size: 12px;
                color: #999999;
              }
            }
            
          }
        }
        .msgcnt{
          p{
            margin: 20px;
            color: #333333;
            font-size: 14px;
          }
        }
        .bianji{
          position: absolute;
          right: 20px;
          bottom: 20px;
          span{
            // display: inline-block;
            // text-align: center;
            width: 96px;
            height: 28px;
            // background: #ccc;
            border-radius: 4px;
            // color: #FFF;
            color: #999;
            font-size: 14px;
            line-height: 28px;
            cursor: pointer;
            user-select: none;
          }
          span:active{
            opacity: .8;
          }
        }
      }
    }
    .nopl{
      display: flex;
      flex-direction: column;
      align-items: center;
      margin-bottom: 30px;
      img{
        margin-bottom: 30px;
        width: 280px;
      }
      p{
        font-size: 16px;
        color: #666;
      }
    }
    .seeallpl{
      text-align: center;
      color: #999999;
      font-size: 14px;
      line-height: 54px;
      cursor: pointer;
      user-select: none;
    }
    .seeallpl:active{
      color: #08a579;
    }
  }
  /deep/.el-dialog {
    border-radius: 20px;
    overflow: hidden;
  }
  /deep/.el-dialog__headerbtn .el-dialog__close {
    margin-right: 10px;
    color: #c0c1c5;
    font-size: 18px;
    font-weight: 600;
  }
  /deep/.el-dialog__headerbtn {
    right: 36px;
  }
  .pinglunTc{
    h5{
      margin-bottom: 10px;
      text-align: center;
      color: #999999;
      font-size: 14px;
      font-weight: normal;
    }
    .rate{
      display: flex;
      justify-content: center;
      margin-bottom: 40px;
      /deep/.el-rate__icon {
        margin-right: 0;
        font-size: 38px;
      }
    }
    .shuru{
      /deep/.el-textarea__inner:focus{
        border-color: #ccc;
      }
      /deep/.el-textarea__inner{
        width: 500px;
        border: 1px solid #dcdfe6 !important;
      }
    }
    .tips{
      margin-top: 10px;
      font-size: 14px;
      color: #999999;
    }
    .niming{
      display: flex;
      align-items: center;
      margin-top: 40px;
      img{
        width: 16px;
        height: 16px;
        cursor: pointer;
        user-select: none;
      }
      span{
        margin-left: 10px;
        font-size: 14px;
        color: #333333;
      }
    }
    .submit{
      margin: 0 auto;
      margin-top: 15px;
      text-align: center;
      line-height: 40px;
      width: 160px;
      height: 40px;
      background: #08A579;
      border-radius: 4px;
      font-size: 14px;
      color: #FFF;
      cursor: pointer;
      user-select: none;
    }
    .submit:active{
      opacity: .8;
    }
  }
  .login {
    text-align: center;
    .tcTop {
      margin-bottom: 32px;
      text-align: center;
    }
    .dlevm {
      margin: 0 auto;
      text-align: center;
      width: 240px;
      height: 240px;
      img {
        width: 240px;
        height: 240px;
      }
    }
    p {
      margin-top: 16px;
      margin-bottom: 35px;
      text-align: center;
      font-size: 14px;
      color: #666;
    }
    .gologin {
      margin: 0 auto;
      text-align: center;
      width: 400px;
      height: 60px;
      line-height: 60px;
      color: #333;
      font-size: 16px;
      background: rgba(242, 237, 237, 0);
      border: 1px solid #dcdfe6;
      border-radius: 6px;
      cursor: pointer;
    }
  }
  .Gmoney {
    /deep/.el-dialog {
    }
    h2 {
      text-align: center;
      font-size: 24px;
      a {
        color: #f6444e;
      }
    }
    .fangshi {
      display: flex;
      // justify-content: space-around;
      margin-top: 60px;
      .left {
        display: flex;
        flex-direction: column;
        align-items: center;
        // justify-content: center;
        margin-right: 100px;
        margin-left: 80px;
        .pic {
          width: 200px;
          height: 200px;
          img {
            width: 100%;
          }
        }
        h4 {
          margin-top: 10px;
          font-size: 16px;
          color: #333;
        }
        p {
          margin-top: 12px;
          font-size: 14px;
          color: #999999;
          a {
            color: #f6444e;
          }
        }
      }
      .center,
      .right {
        position: relative;
        width: 240px;
        height: 260px;
        background: #f5faf8;
        border: 2px solid #08a579;
        border-radius: 12px;
        .top {
          display: flex;
          margin: 22px 0 20px 26px;
          img {
            position: relative;
            top: 1px;
            margin-right: 5px;
            width: 20px;
            object-fit: contain;
          }
          h3 {
            font-size: 16px;
            color: #333;
          }
        }
        p {
          margin-left: 26px;
          font-size: 14px;
          width: 183px;
          color: #666;
          line-height: 22px;
        }
        a {
          display: inline-block;
          margin-left: 26px;
          margin-top: 12px;
          text-decoration: underline;
          color: #08a579;
        }
        .moneyJs,
        .numberJs {
          position: absolute;
          bottom: 26px;
          margin-left: 60px;
          text-align: center;
          line-height: 40px;
          width: 120px;
          height: 40px;
          color: #fff;
          font-size: 14px;
          background: #08a579;
          border-radius: 4px;
          cursor: pointer;
        }
      }
      .center {
        margin-right: 40px;
      }
    }
  }
  .duihuan {
    /deep/.el-dialog__body {
      padding: 0 20px;
    }
    /deep/.el-dialog__header {
      padding-top: 10px;
    }
    h2 {
      margin-bottom: 40px;
      text-align: center;
      font-size: 18px;
      color: #333;
    }
    .shuru {
      margin: 0 auto;
      margin-bottom: 40px;
      width: 280px;
      height: 54px;
      border: 1px solid #cccccc;
      border-radius: 4px;
      input {
        width: 270px;
        height: 52px;
        font-size: 14px;
        text-align: center;
        border: 0;
        outline: none;
      }
    }
    .sureJs {
      margin-left: 100px;
      margin-bottom: 38px;
      text-align: center;
      line-height: 40px;
      color: #fff;
      font-size: 14px;
      width: 120px;
      height: 40px;
      background: #08a579;
      border-radius: 4px;
      cursor: pointer;
    }
  }
  .yuyueevm {
    /deep/.el-dialog__header {
      padding: 0;
    }
    /deep/.el-dialog {
      margin-top: 13vh !important;
      border-radius: 20px;
    }
    /deep/.el-dialog__body {
      padding: 0;
      height: 450px;
    }
    /deep/.el-dialog__headerbtn .el-dialog__close {
      color: #c0c1c5 !important;
    }
    .yyevmContent {
      width: 400px;
      height: 500px;
      border-radius: 20px;
      .top {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        width: 400px;
        height: 100px;
        border-radius: 20px 20px 0px 0px;
        img {
          width: 40px;
        }
        h3 {
          text-align: center;
          font-size: 18px;
          line-height: 30px;
          color: #333;
        }
      }
      .dy {
        margin-top: 50px;
      }

      .signSuccessContent {
        text-align: center;
        overflow: hidden;
        .pic {
          margin: 0 auto;
          margin-bottom: 20px;
          width: 160px;
          height: 160px;
          border: 1px solid #dedede;
          img {
            width: 160px;
            height: 160px;
          }
        }
        p {
          text-align: center;
          width: 300px;
          margin: 0 auto;
          margin-bottom: 15px;
          text-align: center;
          font-size: 15px;
          color: #333;
          // font-weight: bold;
        }
        span {
          margin: 0 auto;
          margin-top: 10px;
          display: inline-block;
          text-align: center;
          width: 200px;
          height: 40px;
          line-height: 40px;
          color: #fff;
          background: #08a579;
          border: 1px solid #dcdfe6;
          border-radius: 6px;
          cursor: pointer;
          user-select: none;
        }
        span:active {
          opacity: 0.8;
        }
      }
    }
  }
  .dytips {
    /deep/.el-dialog__body {
      padding: 0;
      height: 200px;
    }
    .yyevmContent {
      height: 200px;
      h4 {
        position: relative;
        top: -25px;
        font-size: 18px;
        color: #333;
      }
    }
  }
}
//下面的style为了处理多选框初始的样式问题
</style>

<style lang="less">
.el-checkbox__input.is-checked .el-checkbox__inner,
.el-checkbox__input.is-indeterminate .el-checkbox__inner {
  // border-color: #ccc !important;
  background-color: #08a579 !important;
}
.el-checkbox__inner {
  // margin-left: 10px !important;
}
.el-checkbox__input.is-checked + .el-checkbox__label {
  color: #333 !important;
}
.el-checkbox__inner:hover {
  border-color: #08a579 !important;
}
.el-checkbox__input.is-focus .el-checkbox__inner {
  border-color: #08a579 !important;
}
.el-checkbox__input.is-indeterminate .el-checkbox__inner {
  background-color: #fff !important;
  color: #fff !important;
  width: 14px;
  height: 14px;
}
</style>